There are no beautiful surfaces without a terrible depth.
-Friedrich Nietzsche

Introduction

The HTML Document Object Model(DOM) is the owner of all other object in the web page.There are so many ways javascript methods that can be used to manipulate the DOM.

In this tutorial, we will be looking at just 7 of those javascript methods to carryout DOM manipulation. Lets get started!

1. document.createElement()

The createElement() method creates a new HTML element specified by the tagname.

Methods To Be Used In the Code Example

createTextNode() --- Helps us to create a new text node

getElementById() --- Helps Us to access an element with a specific ID

appendChild() ---Adds an element as the last child of the document body

replaceChild() --- Replaces a child node within the parent node

Code Example

Result

Hello World
This is a new text paragraph.

Summary

We have a div element that contains a p tag and an h2 tag. After which we got their id's with the document.getElementById() method.

Then we declared two variables. The first one creates a p tag using the createElement() method , while the second one creates a new text using the createTextNode() method.

Finally, we called the appendChild() method and the replaceChild() method to create a new text paragraph.

2. Node.appendChild()

The appendChild() method like we said earlier creates a new element and adds it to the parent node. It is important to note that the appendChild() method adds the new element at the end of any other children of a specified parent node.

Methods To Be Used In the Code Example

querySelector() --- Helps us to target the element in the DOM

createElement() --- Helps us to create a new HTML element in the DOM

textContent ---Helps us to set a given text to the Node

Code Example

Result

I am number one
I am number two
I am number three
I am number four

Summary

We have a list in our HTML which are just three in number. In our script tag we were able to add a fourth member to the list. First we selected the ul tag and then created a new li tag with the createElement() method.

Next we added some content to the newly created list, before appending it to the list. Notice that the newly created list is added at the bottom of the page.

3. Node.insertBefore()

This method inserts a node before the reference node as a child of a specified parent node. That is, it adds a specific child element before another child element.

Methods To Be Used In the Code Example

querySelector() --- Helps us to target the element in the DOM

createElement() --- Helps us to create a new HTML element in the DOM

textContent ---Helps us to set a given text to the Node

Code Example

Result

I am the new number one
I am number one
I am number two
I am number three

Summary

The insertBefore() element adds the newly created li tag to the top. In our script tag, we had to make a reference to the parent element or the new li tag would not have been created.

Here is the format we used: parentNode.insertBefore(newNode, referenceNode);

parentNode : The parent of the newly inserted node.
newNode The: node to be inserted.
referenceNode: The node before which newNode is inserted.

4. Node.removeChild()

The removeChild() method removes a child node from the DOM and returns the removed node. Note that the removed child node still exists in memory, but is no longer part of the DOM.

Methods To Be Used In the Code Example

querySelector() --- Helps us to target the element in the DOM

Code Example

Result

Second on the list
third on the list

Summary

After using the querySelector() method to select both the parent and child elements in our script tag, then we called the removeChild() method. By default, this removes the first item on the list.

5. Node.replaceChild()

The replaceChild() method replaces a child node within the given parent node. This method accepts two parameters: the node to be inserted and the node to be replaced. It follows this format: parentNode.replaceChild(newChild, oldChild);

Methods To Be Used In the Code Example

querySelector() --- Helps us to target the element in the DOM

createElement() --- Helps us to create a new HTML element in the DOM

textContent ---Helps us to set a given text to the Node

Code Example

Result

This Is the new first Paragraph
This is the Second Paragraph
This is the Third Paragraph

Summary

In the script tag, we selected both the parent element ul and the child element li. Then we created a new li tag.

After which we assigned the newly created li tag a new content using textContent.

We then called the replaceChild() method, which replaced the first item on the list with the new liitem we created.

6. Element.setAttribute()

The setAttribute() method takes in two parameters: Element.setAttribute(name, value);

This method either adds a new attribute to the DOM element, or updates the values of an attribute that already exists.

Methods To Be Used In the Code Example

querySelector() --- Helps us to target the element in the DOM

Code Example

Result

List Editable
Old Name

Summary

In our script tag, we selected the li tag using the querySelector() method.

We then called the setAttribute() method. The first parameter we called makes the first item on the list to be editable when clicked upon, making it possible for us to change the text of the first item on the fly, directly from the web page.

7. Element.getAttribute()

The getAttribute() method of the element interface returns the value of a specified attribute on a DOM element. If the specific value does not exist, the value returned will either be null or an empty string "".

It takes the following format: element.getAttribute(attributeName);

Methods To Be Used In the Code Example

querySelector() --- Helps us to target the element in the DOM

document.write() --- Helps us to write a string of text to the DOM

Code Example

Result

https://dev.to/

Summary

In our script tag, we selected the a tag. Next up, we used the getAttribute() method to select the href attribute inside the a tag.

Finally we displayed the full URL of the href attribute in the DOM by using the document.write() method.

Conclusion

One of the most useful capabilities of javascript is its ability to manipulate the DOM. It is one of the skills you need to master if you want to improve your javascript abilities as a web developer.

In this tutorial we were able to cover a few of them. So you can go ahead and make further research so as to strengthen your knowledge base about DOM manipulation with javascript.

To get more free content on web development, subscribe to my newsletter:
here