Question:

Explain the different ways of inserting or removing markup into and from the DOM (such as using the innerHTML property or the appendChild or removeChild methods).

Adding to the DOM

Let’s first talk about the various ways we can add to our markup. There are various properties that allow us to do this: the appendChild and the innerHTML but we must also talk about createElement and createTextNode if we are going to do anything useful with appendChild. Let’s first talk about the currently discussed method.

The appendChild() Method

Using the appendChild method we can add any element we want to the DOM, we do this using an onClick function that will add an item to a shopping cart when we click on it. However, to do this we must first create that item and text we would like first. We do this using the createElement and createTextNode.

// creates a li element node
var li_node = document.createElement("li");

// creates a text node 
var text_node = document.createTextNode("WaterMelon $50")

Now that we have created are list element and text we can use the appendChild to add the text to the li element.

// the text gets added to the list node
li_node.appendChild(text_node);

Finally, let’s add this li node to the ul element with the id = “shopList”.

// Now we have added the li node withe the text to the ul parent
document.getElementById("shopList").appendChild(li_node);

This was pretty magical but it leaves a lot to be desired, let’s add a real working example to show how we could use it in real life.

See the Pen shopping Cart by oscar (@nopity) on CodePen.

It’s a simple example but shows how all the pieces come together.

The innerHTML Method

The innerHTML method allows us to read the contents of what’s in between an element tag and we can change the contents by using this property.

var domLevels = document.querySelector("#List")

// read- mode
output_before = domLevels.innerHTML;

// write mode 
 domLevels.innerHTML = "<li>Yes its a lovely day</li>"

Here we show the different modes. The read mode output may look similar to the write mode but keep in mind it doesn’t change the content of the element it just returns that content.

Removing from the DOM

There is one method that is used mostly to remove markup:

The removeChild() Method

Using this we can remove children element say from a list or a paragraph. The syntax for this is similar to the appendChild method used earlier.

//removing first child from the parent
parent.removeChild(child1);

Remember that code pen we showed let’s use that same markup but let’s remove the “Click the button below” text when we click the button using this method.

See the Pen LRmmaw by oscar (@nopity) on CodePen.

Summary

We covered a lot but hopefully now you know how to remove and add to the DOM with the methods we discussed.