DOM add node
XML DOM Add Node
##Try it - Example Function loadXMLDoc(), located in external JavaScript, is used to load XML files.
This example uses the appendChild() method to add a child node to an existing node.
This example uses the insertBefore() method to insert a node before a specified child node.
This example uses the setAttribute() method to add a new attribute.
This example uses insertData() to insert data into an existing text node.
Add node - appendChild()appendChild() method adds a child node to an existing node. New nodes will be added (appended) after any existing child nodes.
Note: If the position of the node is important, please use the insertBefore() method.
The following code snippet creates an element (<edition>) and adds it after the last child node of the first <book> element:<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
document.write(x.getElementsByTagName("edition")[0].nodeName);
</script>
</body>
</html>Run instance»Click the "Run instance" button to view the online instance
- Use loadXMLDoc() to load "books.xml" into xmlDoc
- Create a new node<edition>
- Append this node to the first <book> element
Insert node - insertBefore()insertBefore() method is used to insert a node before the specified child node. This method is useful when the position of the node being added is important:
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements before: " + y.length);
document.write("<br>");
x.insertBefore(newNode,y[3]);
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements after: " + y.length);
</script>
</body>
</html>Run the instance »Click the "Run Instance" button to view the online instance
Explanation of examples:
Use loadXMLDoc() to load "books.xml" into xmlDoc
Create a new element node <book>
Insert this new node before the last <book> element node
If the second of insertBefore() If the first parameter is null, the new node will be added after the last existing child node.
x.insertBefore(newNode,null) and x.appendChild(newNode) can both append a new child node to x.
Add new attributes
addAtribute() This method does not exist.
If the attribute does not exist, setAttribute() can create a new attribute:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
x[0].setAttribute("edition","first");
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html>Running instance »
Click the "Run Example" button to view the online example
Explanation of the example:
Use loadXMLDoc() to load "books.xml" Load xmlDoc
Set (create) the value of the "edition" attribute of the first <book> element to "first"
Note: If the attribute already exists, the setAttribute() method will overwrite the existing value.
Add text to text nodes - insertData()
insertData() method inserts data into an existing text node.
insertData() method has two parameters:
offset - where to start inserting characters (starting with 0)
string - The string to insert
The following code snippet will add "Easy" to the text node of the first <title> element of the loaded XML:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(0,"Easy ");
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
