DOM Add Nodes

Inserting nodes into XML documents

➕ What is Adding Nodes?

Adding nodes means inserting new elements into existing XML documents at specific positions. You can append to the end, insert before elements, or replace existing nodes to modify your document structure. 


// Add a node to the end
parentNode.appendChild(newNode);

// Insert before another node
parentNode.insertBefore(newNode, existingNode);

Node Addition Methods

The DOM provides multiple methods to add nodes at different positions. Choose the right method based on where you want to insert your new content.

⬇️

appendChild()

Adds node at the end 

parent.appendChild(child);
⬆️

insertBefore()

Inserts before a specific node 

parent.insertBefore(new, old);
🔄

replaceChild()

Replaces an existing node 

parent.replaceChild(new, old);
🏷️

setAttributeNode()

Adds an attribute node 

element.setAttributeNode(attr);

🔹 Using appendChild()

The appendChild() method adds a node to the end of a parent's child list: 

// Parse XML
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(
    "<library><book>Book 1</book></library>", 
    "text/xml"
);

// Create new book
var newBook = xmlDoc.createElement("book");
newBook.appendChild(xmlDoc.createTextNode("Book 2"));

// Append to library
xmlDoc.documentElement.appendChild(newBook);

console.log(xmlDoc.documentElement.outerHTML);

Output: 

<library>
  <book>Book 1</book>
  <book>Book 2</book>
</library>

🔹 Using insertBefore()

Insert a node before a specific existing node in the parent's child list: 

// Parse XML
var xmlDoc = parser.parseFromString(
    "<library><book id='2'>Second</book></library>", 
    "text/xml"
);

// Create new book
var newBook = xmlDoc.createElement("book");
newBook.setAttribute("id", "1");
newBook.appendChild(xmlDoc.createTextNode("First"));

// Get existing book
var existingBook = xmlDoc.getElementsByTagName("book")[0];

// Insert before existing
xmlDoc.documentElement.insertBefore(newBook, existingBook);

console.log(xmlDoc.documentElement.outerHTML);

Output: 

<library>
  <book id="1">First</book>
  <book id="2">Second</book>
</library>

🔹 Using replaceChild()

Replace an existing node with a new one: 

// Parse XML
var xmlDoc = parser.parseFromString(
    "<library><book>Old Book</book></library>", 
    "text/xml"
);

// Create replacement
var newBook = xmlDoc.createElement("book");
newBook.appendChild(xmlDoc.createTextNode("New Book"));

// Get old book
var oldBook = xmlDoc.getElementsByTagName("book")[0];

// Replace
xmlDoc.documentElement.replaceChild(newBook, oldBook);

console.log(xmlDoc.documentElement.outerHTML);

Output:

<library><book>New Book</book></library>

🔹 Adding Multiple Nodes

You can add multiple nodes in sequence to build complex structures: 

// Parse XML
var xmlDoc = parser.parseFromString(
    "<library></library>", "text/xml"
);

// Create multiple books
var books = ["JavaScript Guide", "XML Basics", "DOM Tutorial"];

books.forEach(function(title) {
    var book = xmlDoc.createElement("book");
    book.appendChild(xmlDoc.createTextNode(title));
    xmlDoc.documentElement.appendChild(book);
});

console.log(xmlDoc.documentElement.outerHTML);

Output: 

<library>
  <book>JavaScript Guide</book>
  <book>XML Basics</book>
  <book>DOM Tutorial</book>
</library>

🔹 Complete Example

Build a complete library with different addition methods: 

// Start with basic XML
var xmlDoc = parser.parseFromString(
    "<library><book id='2'>Middle Book</book></library>", 
    "text/xml"
);

// Add book at the end
var lastBook = xmlDoc.createElement("book");
lastBook.setAttribute("id", "3");
lastBook.appendChild(xmlDoc.createTextNode("Last Book"));
xmlDoc.documentElement.appendChild(lastBook);

// Insert book at the beginning
var firstBook = xmlDoc.createElement("book");
firstBook.setAttribute("id", "1");
firstBook.appendChild(xmlDoc.createTextNode("First Book"));
var middleBook = xmlDoc.getElementsByTagName("book")[0];
xmlDoc.documentElement.insertBefore(firstBook, middleBook);

console.log(xmlDoc.documentElement.outerHTML);

Output: 

<library>
  <book id="1">First Book</book>
  <book id="2">Middle Book</book>
  <book id="3">Last Book</book>
</library>

🧠 Test Your Knowledge

Which method adds a node at the end of the parent's children?