One of the tasks we will perform most frequently when manipulating the DOM is inserting or deleting nodes.
In this article, we will explore in detail how to carry out these operations using JavaScript, providing examples and explanations suitable for university students.
JavaScript offers several methods related to modifying the DOM structure. These methods can be classified into the following categories:
- Insert new elements
- Replace elements
- Delete 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 list of children. |
insertBefore() | Inserts a node before a reference node. |
createElement()
To insert new elements into the DOM, you must first 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 list of children.
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 DOM node 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 Delete Elements from the DOM
Finally, these methods allow us to delete existing elements in the DOM tree.
| Method | Description |
|---|---|
removeChild() | Removes a child node referenced from its parent node. |
remove() | Removes an element directly from the DOM. |
innerHTML = '' | Clears all children of a node. |
removeChild()
To delete a child node, you must first select the node to delete and its parent node. Then, use the parent node’s removeChild() method.
const container = document.getElementById('container');
const child = document.getElementById('child');
container.removeChild(child);
remove()
If you only need to delete 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 delete 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 = '';
