7 Javascript Methods That Aid DOM Manipulation
Tags: javascript, beginners, tutorial, html
Published: 2019-05-06 11:14:25

---
title: 7 Javascript Methods That Aid DOM Manipulation 
published: true
description: 
tags: javascript,beginners,tutorial,html
cover_image: https://res.cloudinary.com/dz4tt9omp/image/upload/v1557098204/document.jpg
---

> _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

{% gist https://gist.github.com/desoga10/1efc3f1d7e1c9aa97e0ec62066b8bc95 %}


#### 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

{% gist https://gist.github.com/desoga10/c9eb6a10bbab3a324f9b1facea7e242e %}


#### 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
{% gist https://gist.github.com/desoga10/f8ccde8ce555b5ef032240415b7b8644 %}
#### 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
{% gist https://gist.github.com/desoga10/ee677abd9305c414ff64b7ed71edcdc3 %}
#### 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
{% gist https://gist.github.com/desoga10/fe6bcb481f2f34ebac36235e1e9d1d25 %}
#### 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 `li`item 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
{% gist https://gist.github.com/desoga10/b474e523415b683e2368e948061e79dc %}
#### 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
{% gist https://gist.github.com/desoga10/96790633272deedf44ff31ba74211aca %}
#### 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:
<a href="http://eepurl.com/gZ-jJH" target="_blank">here</a>