XML DOM Change Nodes

Modifying XML element content and attributes

✏️ What is Changing Nodes?

Changing nodes means modifying existing XML data. You can update element text, change attribute values, or modify node content dynamically. This allows you to edit XML documents programmatically without rewriting the entire file. 


// Change element text
element.childNodes[0].nodeValue = "New Text";
// Change attribute
element.setAttribute("id", "newId");

Node Modification Methods

XML DOM provides several methods to modify existing nodes. You can change text content, update attributes, or modify element properties. These changes happen in memory and can be saved back to the XML document if needed.

📝

Change Text

Update element text content 

nodeValue = "text"
🏷️

Set Attribute

Change attribute values 

setAttribute()
📄

Text Content

Update all text inside element 

textContent = "text"
🔄

Node Data

Modify node data directly 

data = "new data"

🔹 Sample XML Data

We'll use this XML for modification examples: 

<?xml version="1.0"?>
<store>
    <product id="P001" status="available">
        <name>Laptop</name>
        <price>999</price>
        <quantity>10</quantity>
    </product>
    <product id="P002" status="available">
        <name>Mouse</name>
        <price>25</price>
        <quantity>50</quantity>
    </product>
</store>

🔹 Change Element Text

Update the text content of an element: 

// Get the first product name
var name = xmlDoc.getElementsByTagName("name")[0];

// Display original value
console.log("Original: " + name.childNodes[0].nodeValue);

// Change the text
name.childNodes[0].nodeValue = "Gaming Laptop";

// Display new value
console.log("Updated: " + name.childNodes[0].nodeValue);

Output:

Original: Laptop

Updated: Gaming Laptop

🔹 Change Attribute Values

Modify attribute values using setAttribute(): 

// Get first product
var product = xmlDoc.getElementsByTagName("product")[0];

// Display original attribute
console.log("Original status: " + product.getAttribute("status"));

// Change the attribute
product.setAttribute("status", "sold out");

// Display new attribute
console.log("Updated status: " + product.getAttribute("status"));

Output:

Original status: available

Updated status: sold out

🔹 Change Using textContent

Use textContent for simpler text updates: 

// Get price element
var price = xmlDoc.getElementsByTagName("price")[0];

// Display original
console.log("Original price: $" + price.textContent);

// Update price
price.textContent = "899";

// Display updated
console.log("New price: $" + price.textContent);

Output:

Original price: $999

New price: $899

🔹 Change Multiple Elements

Update multiple elements in a loop: 

// Get all quantity elements
var quantities = xmlDoc.getElementsByTagName("quantity");

console.log("Updating all quantities...");

// Increase all quantities by 5
for (var i = 0; i < quantities.length; i++) {
    var current = parseInt(quantities[i].textContent);
    var newQty = current + 5;
    quantities[i].textContent = newQty;
    console.log("Product " + (i+1) + ": " + current + " → " + newQty);
}

Output:

Updating all quantities...

Product 1: 10 → 15

Product 2: 50 → 55

🔹 Change Multiple Attributes

Update several attributes of an element: 

// Get second product
var product = xmlDoc.getElementsByTagName("product")[1];

// Change multiple attributes
product.setAttribute("id", "P999");
product.setAttribute("status", "featured");
product.setAttribute("discount", "10%");

console.log("ID: " + product.getAttribute("id"));
console.log("Status: " + product.getAttribute("status"));
console.log("Discount: " + product.getAttribute("discount"));

Output:

ID: P999

Status: featured

Discount: 10%

🔹 Complete Change Example

Full example showing various modification techniques: 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xmlText = `<store>
    <product id="P001" status="available">
        <name>Laptop</name>
        <price>999</price>
    </product>
</store>`;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "text/xml");

// Get product
var product = xmlDoc.getElementsByTagName("product")[0];
var name = product.getElementsByTagName("name")[0];
var price = product.getElementsByTagName("price")[0];

// Show original
var output = "BEFORE:<br>";
output += "Name: " + name.textContent + "<br>";
output += "Price: $" + price.textContent + "<br>";
output += "Status: " + product.getAttribute("status") + "<br><br>";

// Make changes
name.textContent = "Gaming Laptop";
price.textContent = "1299";
product.setAttribute("status", "featured");

// Show updated
output += "AFTER:<br>";
output += "Name: " + name.textContent + "<br>";
output += "Price: $" + price.textContent + "<br>";
output += "Status: " + product.getAttribute("status");

document.getElementById("demo").innerHTML = output;
</script>

</body>
</html>

Output:

BEFORE:

Name: Laptop

Price: $999

Status: available

AFTER:

Name: Gaming Laptop

Price: $1299

Status: featured

🧠 Test Your Knowledge

Which method changes an attribute value?