DOM Create Nodes
Building new elements in XML documents
🔨 What is Creating Nodes?
Creating nodes means building new elements, text, or attributes in your XML document using JavaScript. You can dynamically add content to make your XML documents interactive and flexible.
// Create a new element node
var newElement = xmlDoc.createElement("book");
var textNode = xmlDoc.createTextNode("Harry Potter");
newElement.appendChild(textNode);
Node Creation Methods
The XML DOM provides several methods to create different types of nodes. Each method serves a specific purpose for building your document structure dynamically.
createElement()
Creates a new element node
var elem = xmlDoc.createElement("title");createTextNode()
Creates a text node with content
var text = xmlDoc.createTextNode("Hello");createAttribute()
Creates a new attribute node
var attr = xmlDoc.createAttribute("id");createComment()
Creates a comment node
var comment = xmlDoc.createComment("Note");🔹 Creating Element Nodes
Element nodes are the building blocks of XML documents. Here's how to create a new element:
// Load XML document
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(
"<library></library>", "text/xml"
);
// Create new element
var newBook = xmlDoc.createElement("book");
// Add to document
xmlDoc.documentElement.appendChild(newBook);
console.log(xmlDoc.documentElement.outerHTML);
// Output: <library><book/></library>Output:
<library><book/></library>
🔹 Creating Text Nodes
Text nodes contain the actual content inside elements. Combine them with elements:
// Create element and text
var title = xmlDoc.createElement("title");
var titleText = xmlDoc.createTextNode("The Great Gatsby");
// Combine them
title.appendChild(titleText);
// Add to document
xmlDoc.documentElement.appendChild(title);
console.log(xmlDoc.documentElement.outerHTML);
// Output: <library><title>The Great Gatsby</title></library>Output:
<library><title>The Great Gatsby</title></library>
🔹 Creating Attribute Nodes
Attributes add extra information to elements. Create and attach them easily:
// Create element
var book = xmlDoc.createElement("book");
// Create attribute
var idAttr = xmlDoc.createAttribute("id");
idAttr.value = "B001";
// Attach attribute to element
book.setAttributeNode(idAttr);
// Or use setAttribute (simpler way)
book.setAttribute("category", "fiction");
console.log(book.outerHTML);
// Output: <book id="B001" category="fiction"/>Output:
<book id="B001" category="fiction"/>
🔹 Complete Example
Let's create a complete book entry with all node types:
// Parse empty XML
var xmlDoc = parser.parseFromString(
"<library></library>", "text/xml"
);
// Create book element
var book = xmlDoc.createElement("book");
book.setAttribute("id", "B001");
// Create title
var title = xmlDoc.createElement("title");
title.appendChild(xmlDoc.createTextNode("1984"));
book.appendChild(title);
// Create author
var author = xmlDoc.createElement("author");
author.appendChild(xmlDoc.createTextNode("George Orwell"));
book.appendChild(author);
// Add comment
var comment = xmlDoc.createComment("Classic novel");
book.appendChild(comment);
// Add to library
xmlDoc.documentElement.appendChild(book);
console.log(xmlDoc.documentElement.outerHTML);Output:
<library>
<book id="B001">
<title>1984</title>
<author>George Orwell</author>
<!--Classic novel-->
</book>
</library>