How to Make Changes to the DOM Tutorial
Tags: javascript, beginners, tutorial, webdev
Published: 2022-08-22 14:03:36

In this article, we’re going to learn all about how we can add, change, replace, and remove nodes from the DOM. We’ll be looking specifically at the `createElement()` and `createTextNode()` methods.

## Creating New Nodes
Let's create the following HTML file:
```html
<html lang="en">
<head>
    <title>Master the DOM!</title>
  </head>
<body>
    <h1>Master the DOM!</h1>
  </body>
</html>
```
Open up the _Console_ tab in Developer Tools.

Let’s use the `createElement()` method on the `document` object to create a new `p` element.
```js
const paragraph = document.createElement('p');

console.log(paragraph);     // <p></p>
```
Success! The `paragraph` variable gives us our `p` element.

We can now add text to our element, with the `textContent` property:
```js
paragraph.textContent = "I'm a paragraph!";

console.log(paragraph);     // <p>I'm a paragraph!</p>
```
By combining `createElement()` and `textContent` we can create a complete element node.

We could also use the `innerHTML` property to add content to an element. With this property we can add both text and HTML to our element:
```js
paragraph.innerHTML = "I'm a <strong>bold</strong> paragraph!";
```
Of the two methods, `textContent` is superior — it’s slightly faster to render than `innerHTML`.

It’s also possible to create a text node using the `createTextNode()` method:
```js
const text = document.createTextNode("I'm a text node!");

console.log(text);    // "I'm a text node!"
```
All of these methods have created new elements and text nodes, however, they are not visible on the front end of a website until they’ve been inserted into the document!

## Inserting Nodes into the DOM
To see the new text nodes and elements we create on the front end, we need to insert them into the `document`. The methods `appendChild()` & `insertBefore()` are used to add items to the beginning, middle, or end of a parent element, and `replaceChild()` is used to replace an old node with a new node.

Let's demo this by adding a list to our HTML:
```html
<ul>
  <li>Get Chicken</li>
  <li>Get Salmon</li>
  <li>Get Steak</li>
</ul>
```
Say we want to add a new item to the end of our list, we have to create the element and add text to it first, as we did previously, like so:
```js
// Get the ul element
const list = document.querySelector('ul');

// Create new list item
const newItem = document.createElement('li');
newItem.textContent = 'Get Shrimp';
```
We now have a complete element for our new list item! So we can add it to the end of the list using `appendChild()`:
```js
// Add our new item to the end of the list
list.appendChild(newItem);
```
And our new `li` element has been appended to the end of the `ul`.

To add an item to the beginning of our list, let’s create another element (we have to again create a new element, as `createElement()` (can‘t be reused):
```js
// Create a new list item
const anotherNewItem = document.createElement('li');
anotherNewItem.textContent = 'Get Taco Shells';
```
We use the `insertBefore()` method to add it to the beginning of our list. It will take two arguments, the first being the new child node to be added, and the second is the sibling node that will immediately follow.
```js
parentNode.insertBefore(newNode, nextSibling);
```
So for our example, we’ll add the new `anotherNewItem` element to the start of our list, like so:
```js
// Add a new item to the beginning of the list
list.insertBefore(anotherNewItem, list.firstElementChild);
```
And now our new node has been added to the start of our list!

Let’s also take a look at how we can replace an existing node with a new node using `replaceChild()`. First, we create a new element:
```js
const modifiedItem = document.createElement('li');
modifiedItem.textContent = "Get Sauces";
```
`replaceChild()` also takes two arguments, first the new node, then the node to be replaced.
```js
parentNode.replaceChild(newNode, oldNode);
```
In our example, we’re replacing the third element child on our list:
```js
// Replace list item
list.replaceChild(modifiedItem, list.children[3])
```
Using a combination of `appendChild()`, `insertBefore()`, and `replaceChild()`, we can insert nodes and elements anywhere in the DOM!

## Removing Nodes from the DOM
To remove nodes from the DOM, we can use `removeChild()` to remove child nodes from their parent, or we can use `remove()` to remove the node itself.

Returning to our example let's remove the last item on our list:
```js
// Remove the last list item
list.removeChild(list.lastElementChild);
```
Alternatively, we could use `remove()`, to remove the node itself:
```js
// Remove the third element from our list
list.children[2].remove();
```
Using `removeChild()` and `remove()`, you can remove any node from the DOM.

In the next tutorial, we’ll take a look at how we can modify classes & styles in the DOM by modifying HTML element nodes.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)