🟨JavaScript DOM manipulation

making changes to the HTML with JavaScript

Finally, now for some "real", "internet-y" stuff!

Manipulating text (innerHTML or textContent or innerText)

We can use the innerHTML propertyt to manipulate the content of each DOM object:

index.html
<html>
    <head>
        ...
        <script src="index.js"></script>
    </head>
    <body>
        <div id="app">hey</div>
        <div id="bar">x</div>        
    </body>
</html>
index.js
document.body.innerHTML = "<p>hi</p>"

If we load up index.html the entire webpage will show just:

hi

...as we have just replaced the entire document's body to consist of only that string!

// Some code

If the manipulation of text comes from public user input, we should use textContent in place of innerHTML as letting a public user "inject" HTML might cause problems! The textContent will only accept a plain string ;)

innerText example

Another property related to innerHTML and textContent is: innerText which returns only the visible non-HTML text within an HTML element:

const body = document.body
console.log(body.innerText)
// "Hi"

textContent example

Meanwhile, textContent would return both the visible (non-hidden) and non-visible (hidden), non-HTML text of an HTML element:

const body = document.body
console.log(body.textContent);
/*
Hi
This is a website!
*/

innerHTML example

Finally, for the sake of completeness, we can contrast the above two samples with innerHTML:

const body = document.body
console.log(body.innerHTML);
/*
       <h1>Hi</h1>
        
       <p hidden>This is a website!</p>
*/

There also exists an outerHTML property which also returns the tag which references it!

Manipulating objects (getElementById)

Now that we know how to manipulate the document's body, we should know how to manipulate its objects:

document.getElementById('app').innerHTML = "hey hey! ho ho!"

Loading up index.html the webpage will display:

hey hey! ho ho!
x

Note that it will replace only the first <div> because we specified to get the <div> with the id of app and not bar

Creating and appending objects (appendChild and createElement)

We can:

  • create elements with the document.createElement function

  • insert content by using innerText or textContent

  • append them using the document.body.appendChild function

...and we can pass the former as an argument to the latter:

const paragraph = document.createElement('p')
paragraph.textContent = 'Cake'
document.body.appendChild(paragraph)
// <p>Cake</p>

Selecting and removing objects (querySelector and removeChild)

Likewise, we can:

  • point to an element with document.querySelector

    • querySelector takes one String parameter that resembles the notation of the CSS selector, e.g. .my-class , #anId, section.section-blue

  • delete objects from the DOM using document.body.removeChild

const blueSection = document.querySelector('section.section-blue')
document.body.removeChild(blueSection)

Setting element attributes (setAttribute)

As well, we can create and update element attributes given an Element : 

const myParagraph = document.getElementById("myparagraph")
myParagraph.setAttribute("class", "myClass")
// the DOM will change to <p id="myparagraph" class="myclass">Hi</p>
PreviousJavaScript DOM traversalNextJavaScript navigator + window + document

Last updated