XML DOM Modify

Reading the DOM gives you data. Modifying the DOM changes the document in memory. You can add new elements, change text, update attributes, and delete nodes — all without touching the original XML file. The changes exist in memory and can be serialized back to XML when needed.

Changing Element Text Content

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

// Change the text content
price.childNodes[0].nodeValue = "999";

// Or using textContent (simpler, modern browsers)
price.textContent = "999";

Setting Attribute Values

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

// Change existing attribute
product.setAttribute("category", "peripherals");

// Add a new attribute
product.setAttribute("onSale", "true");

// Remove an attribute
product.removeAttribute("onSale");

Creating New Elements

// Create a new element
var newProduct = xmlDoc.createElement("product");

// Create child elements for it
var nameEl = xmlDoc.createElement("name");
var priceEl = xmlDoc.createElement("price");

// Create text nodes for the children
var nameText = xmlDoc.createTextNode("Webcam HD");
var priceText = xmlDoc.createTextNode("2499");

// Build the tree
nameEl.appendChild(nameText);
priceEl.appendChild(priceText);
newProduct.appendChild(nameEl);
newProduct.appendChild(priceEl);

// Add the new product to the catalog
var catalog = xmlDoc.documentElement;
catalog.appendChild(newProduct);

Inserting Before an Existing Node

// Insert newProduct before the second existing product
var secondProduct = xmlDoc.getElementsByTagName("product")[1];
catalog.insertBefore(newProduct, secondProduct);

Removing Nodes

// Remove a specific element
var products = xmlDoc.getElementsByTagName("product");
var toRemove = products[1];         // second product
toRemove.parentNode.removeChild(toRemove);

Replacing Nodes

// Create a replacement node
var replacement = xmlDoc.createElement("product");
replacement.setAttribute("id", "P999");

// Replace the first product
var old = xmlDoc.getElementsByTagName("product")[0];
old.parentNode.replaceChild(replacement, old);

Cloning Nodes

// Shallow clone — copies the element but not its children
var shallowCopy = product.cloneNode(false);

// Deep clone — copies the element AND all its children
var deepCopy = product.cloneNode(true);

catalog.appendChild(deepCopy);

Complete Modification Example

// Add a discount attribute to all products over 1000
var products = xmlDoc.getElementsByTagName("product");
for (var i = 0; i < products.length; i++) {
  var price = parseInt(products[i].getElementsByTagName("price")[0].textContent);
  if (price > 1000) {
    products[i].setAttribute("discount", "10%");
  }
}

DOM Modification Methods Summary

Key Points to Remember

• DOM modifications happen in memory — the original XML file is not changed.
• createElement() and createTextNode() create nodes; appendChild() attaches them.
• setAttribute() adds or updates an attribute; removeAttribute() deletes it.
• removeChild() requires calling it on the parent node.
• cloneNode(true) deep-copies an element including all its children.
• After modifications, serialize the DOM to a string to save the updated XML.