Hey Paramveer

Creating, Appending, and Removing DOM Nodes

Written by

Paramveer Singh

in

When working with web pages, the Document Object Model (DOM) allows JavaScript to dynamically manipulate HTML elements — adding new content, updating structures, or removing elements entirely. Understanding how to create, append, and remove DOM nodes is key to building interactive and efficient web experiences.

1. What Are DOM Nodes?

Every element, text, or attribute in an HTML document is represented as a node in the DOM tree. For example, a <div> tag, a text string inside it, or even its attributes like id or class are all nodes that can be accessed and modified using JavaScript.

2. Creating New DOM Elements

To dynamically add new elements, JavaScript provides the document.createElement() method.

const newDiv = document.createElement('div');
newDiv.textContent = 'Hello, this is a new div!';

This creates a <div> element, but it isn’t visible yet because it hasn’t been added to the document.

3. Appending Nodes to the DOM

After creating a node, you can attach it to an existing element in the DOM using appendChild() or append().

const container = document.getElementById('container');
container.appendChild(newDiv);

Now, the newly created <div> will appear inside the element with the ID container.

Difference between append() and appendChild():

  • appendChild() only accepts nodes.
  • append() can handle text strings and multiple nodes.

Example:

container.append('Some text', newDiv);

4. Inserting Elements Before or After

Sometimes you need to insert an element at a specific position rather than just appending it to the end.

  • Before a specific element:
container.insertBefore(newDiv, container.firstChild);
  • After a specific element:
    There’s no direct insertAfter(), but you can use insertBefore() with nextSibling.
container.insertBefore(newDiv, existingElement.nextSibling);

5. Removing DOM Elements

To delete an element, you can use removeChild() or the modern remove() method.

Using removeChild():

container.removeChild(newDiv);

Using remove() (simpler and modern):

newDiv.remove();

This completely deletes the element from the DOM.

6. Example: Adding and Removing a List Item

Here’s a quick example combining all three actions:

const list = document.getElementById('myList');

// Create a new list item
const newItem = document.createElement('li');
newItem.textContent = 'New Item';

// Append it to the list
list.appendChild(newItem);

// Remove it after 3 seconds
setTimeout(() => {
  newItem.remove();
}, 3000);

7. Best Practices

  • Reuse elements when possible instead of recreating them each time.
  • Use document.createDocumentFragment() for bulk insertions — it minimizes reflows and improves performance.
  • Always ensure you’re appending to the correct parent to avoid misplaced elements.

Conclusion

Creating, appending, and removing DOM nodes gives you direct control over your web page’s structure. Whether you’re building a dynamic list, updating content in real-time, or manipulating user interface elements, mastering these DOM methods is a foundational skill in front-end development.

More posts