Modifying DOM

When developing web applications, you often need to make webpage elements change in response to a user's actions. For example, you might want to create a new div container with some paragraphs of text inside, or delete a completed item in a to-do list and replace it with another one. All of this can be achieved using DOM modification methods, as you will learn by reading this topic.

innerHTML and textContent properties

To begin with, let's suppose we want to add a text paragraph to an empty div with the class "container". It's possible to do this by using the innerHTML property, which returns or sets the HTML content of an element. That means the innerHTML property returns or sets a string value that contains HTML markup. Take a look at this code example:

let container = document.querySelector(".container");
container.innerHTML = "<p>DOM is cool!</p>"; 

console.log(container); // <div class="container"><p>DOM is cool!</p></div>

You can also use this property to delete the inner content of the element:

container.innerHTML = ""; 

console.log(container); // <div class="container"></div>

However, when working with a simple piece of text, it's better to use another property called textContent. As its name suggests, this property represents the text content of the element.

Now let's get back to our example and set the text content of the div element:

container.textContent = "Hello, World!"; 

console.log(container); // <div class="container">Hello, World!</div>

createElement() and createTextNode()

When you need to make a webpage element you should consider using the createElement() method. It creates a new HTML element that is specified by the tag name given as an argument.

The below code example demonstrates how createElement() can be used and what happens if you pass an invalid tag name:

let myElement = document.createElement("div");
let errorElement = document.createElement("Hello!");

console.log(myElement); // <div></div>
console.log(errorElement); // DOMException: The tag name provided ('Hello!') is not a valid name.

Another option is to use createTextNode(). This method creates a new text node and accepts the text as an argument. The following example illustrates how it works:

let myText = document.createTextNode("I am learning DOM methods!");
let justTextNode = document.createTextNode("div");

console.log(myText); // I am learning DOM methods!
console.log(justTextNode); // div

appendChild()

The appendChild() method accepts a node as an argument and inserts it as the last child of the specified parent element. The method returns the appended element. Consider the following example:

document.body.innerHTML = "<ul id='list'><li>An item</li></ul>"; // creates a list

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "A new item";
list.appendChild(newItem); // inserts newItem as the last child in the list

console.log(list); // <ul id='list'><li>An item</li><li>A new item</li></ul>

remove()

And finally, the remove() method deletes an element from the DOM, as you can see in this code example:

// creates a div with a heading inside
document.body.innerHTML = "<div id='container'><h1 id='heading'>I like JS!</h1></div>";

let container = document.getElementById("container");
let heading = document.getElementById("heading");
heading.remove(); // removes the heading from the container
console.log(container); // <div id="container"></div>

Conclusion

You have learned about innerHTML and textContent in this topic. These properties allow you to set the HTML and text content of elements on the webpage. You've also seen how to create nodes using the createElement() and createTextNode() methods. In addition, you've discovered that the appendChild() and remove() methods are useful for inserting and deleting document elements. Now let's put that knowledge into practice!