Understand The DOM and DOM manipulation with javascript (part 2)
Tags: javascript, dom, webdev, programming
Published: 2022-10-22 13:20:05

In this second part of DOM and DOM  manipulation with javascript we are going to focus on creating, adding and removing content on the web page using DOM. I will recommend you to read the first part [here](https://dev.to/jonathz/understand-the-dom-and-dom-manipulation-with-javascript-part-1-54kk). 

Now , You have an understing of what DOM is , and how to select element from the page , those knowledge will be helpful in this part, without not wasting time let's understand some `document` methods that should help us to create ,add and remove content to the page.

## I. Create new content

### I.1 `createElement()` method

`createElement()` is a `document` interface method that creates a new `HTMLElement` passed as argument.

```javascript

document.createElement("p") // to create a paragraph element

document.createElement("div") // to create a div element.

```

### I.2. `createTextNode` method

Just like you can create a new element with the `createElement()` method, you can also create a new text node using the `createTextNode()` method.

```javascript

const newText = document.createTextNode('I am the text for the paragraph!');

```

## II Add content to the page 

The `createElement` method , creates an element however , this element is only in our javascript code and not on the page yet.
To add a new element to the page we can use the `Node.appendChild()` method or the `Element.append()` method.

### II.1. `Node.appendChild()` method

```html

<!DOCTYPE html>
<html lang="en">
   ...
  <body>
    <h1 id="title">Home page title</h1>
    
    <div class="container">
    </div>

    <script src="./index.js"></script>
  </body>
</html>

```

```javascript

const container = document.querySelector(".container"); // to select the container div

const newPara = document.createElement("p");  // to create a paragraph element

container.appendChild(newPara); // to add a paragraph in the container div

```
_**Notes**_

> 
- `appendChild()` method add the element at the end of the "parent selected", it means , the element added  with `appendChild()` method will be the last child of the selected parent.
- `appendChild()` method must always be called on an existing element.

```javascript
const newPara = document.createElement("p");  // to create a paragraph element

document.appendChild(newPara) // this will throw an error

```




### II.2 `Element.append()` method

The `append()` method inserts a set of Node objects or DOMString (text) after the last child.

```javascript

const container = document.querySelector(".container"); // to select the container div

const newPara = document.createElement("p");  // to create a paragraph element

// case 1: append a node
container.append(newPara); // to add a paragraph in the container div , this looks like <div><p></p></div> 

//case 2: append a DOMString
container.append("this is a text in container") // the div will look like <div>this is a text in container</div>

//case 3: append multiple nodes or DOMString.
const secondPara = document.createElement("p");

const thirdPara = document.createElement("p");

const form = document.createElement("form");

container.append(secondPara,  thirdPara, form, "this is a text in container"); 

```

_**`Element.append()` vs `Node.appendChild()`**_

>
- `Element.append()` allows us to add DOMString, while `Node.appendChild()` only accepts `Node` objects.
- `Element.append()` has no returned value, while `Node.appendChild()` returns the appended `Node` object
- `Element.append()` can append several nodes and strings, while `Node.appendChild()` can only append one node


### II.3 `insertAdjacentHTML()` method 

From previous methods , we've seen that , they always add a new element or content at the end of the selected parent. 
However we can also want to add new content in other location, in , before or after the selected parent.

To do that, the `insertAdjacentHTML()` get in game 🔥️. The `insertAdjacentHTML()` requires two arguments :

- The location of the HTML text we want to add.
- The HTML text.

Different Locations of `insertAdjecentHTML` are the following: 

- `beforebegin` :  inserts the HTML text before the selected parent
- `afterbegin`: inserts the HTML text as the first child in the selected parent
- `beforeend`: inserts the HTML text as the last child in the selected parent
- `afterend`: inserts the HTML text after the selected parent.

```html

<!-- beforebegin -->

<p class="container">

    <!-- afterbegin -->
    
    Existing text/HTML content
    
    <!-- beforeend -->

</p>

<!-- afterend -->

```

```javascript

const container = document.querySelector(".container");

container.insertAdjacentHTML('afterend', "<p>HTML text after the continer</p>");

```

## III. Remove content

To remove content to the page , we will use the following methods.

### III.1. `removeChild()` method

The `removeChild()` method removes a child node from the DOM and returns the removed node.

#### III.1.1 syntax

```javascript

 <parent-element>.removeChild(<child-to-remove>);
 
```

```html

<div id="parent">
  <div id="child"></div>
</div>

```

```javascript

const parent = document.getElementById("parent");

const child = document.getElementById("child");

const throwAwayNode = parent.removeChild(child);

```

_**Notes**_

>
The `removeChild()` method can return a `NotFoundError` if  the `child` node is not a child of the `parent` node.

### III.2. `remove()` method

The `remove()` method removes the element from the DOM. It's the easiest way to remove an element from the DOM and it does not return any value.

```html

<div id="parent">
  <div id="child"></div>
</div>

```


```javascript

const child = document.getElementById("child");
const parent = document.getElementById("parent");

child.remove(); // to remove the child element

// or 

parent.remove(); // to remove the whole parent

```

## Conclusion

Thanks for reading this article , if there is any term that you need me to shed more light on , just add it in the comment or reach out to me on [twitter](https://twitter.com/JonathanZihind4), or [linkedIn](https://www.linkedin.com/in/jonathan-z-0a40ab209/).