One of the tasks we will perform most frequently when manipulating the DOM is inserting or removing nodes.
In this article, we will explore in detail how to carry out these operations using JavaScript, providing appropriate examples and explanations for university students.
JavaScript offers several methods related to modifying the structure of the DOM. These methods can be classified into the following categories:
- Insert new elements
- Replace elements
- Remove elements
Create and Insert Elements
These methods allow us to create or insert new nodes into the DOM tree.
| Method | Description |
|---|---|
document.createElement() | Creates a new HTML element. |
appendChild() | Inserts a node at the end of the parent node’s child list. |
insertBefore() | Inserts a node before a reference node. |
createElement()
To insert new elements into the DOM, you first need to create the nodes you want to add. This is done using the document.createElement() method.
const newElement = document.createElement('div');
newElement.textContent = 'This is a new div';appendChild()
Once the new element is created, you can insert it into the DOM using the appendChild() method, which adds the element to the end of the parent node’s child list.
const container = document.getElementById('container');
container.appendChild(newElement);insertBefore()
If you want to insert a new node before an existing node in the DOM, you can use the insertBefore() method. This method requires two parameters: the new node to insert and the reference node before which the new node will be inserted.
const newElement = document.createElement('div');
newElement.textContent = 'Inserted element';
const container = document.getElementById('container');
const reference = document.getElementById('reference');
container.insertBefore(newElement, reference);Replace Elements
We can also replace an existing node in the DOM with another using this method.
| Method | Description |
|---|---|
replaceChild() | Replaces an existing node with a new one. |
replaceChild()
The replaceChild() function allows you to replace an existing element in the DOM with another element created with createElement().
This function takes two arguments: the element to be added and the element to be replaced.
const oldElement = document.getElementById('old');
parentElement.replaceChild(newElement, oldElement);
In this example, an existing element with the ID old is obtained using the getElementById() function. Then, oldElement is replaced with newElement using the replaceChild() function.
How to Remove Elements from the DOM
Finally, these methods allow us to remove existing elements from the DOM tree.
| Method | Description |
|---|---|
removeChild() | Removes a referenced child node from its parent node. |
remove() | Directly removes an element from the DOM. |
innerHTML = '' | Clears all child nodes of a node. |
removeChild()
To remove a child node, you first need to select the node to be removed and its parent node. Then, use the removeChild() method of the parent node.
const container = document.getElementById('container');
const child = document.getElementById('child');
container.removeChild(child);remove()
If you only need to remove the element itself without referencing its parent, you can use the remove() method directly on the node.
const element = document.getElementById('my-element');
element.remove();Remove All
If you need to remove all children of a node, you can use innerHTML to set the node’s content to an empty string.
const container = document.getElementById('container');
container.innerHTML = '';Using Document Fragments
When you need to add multiple elements to the DOM, it is more efficient to use a DocumentFragment. This avoids multiple renders and improves performance.
| Method | Description |
|---|---|
document.createDocumentFragment() | Allows using a temporary fragment. |
For example,
const fragment = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const newElement = document.createElement('div');
newElement.textContent = `Element ${i + 1}`;
fragment.appendChild(newElement);
}
const container = document.getElementById('container');
container.appendChild(fragment);