YouTip"); } ``` #### Output: ```text Everyday Italian - Edition: First Harry Potter - Edition: First XQuery Kick Start - Edition: First Learning XML - Edition: First ``` --- ## Key Considerations 1. **Moving Existing Nodes:** If the node passed to `appendChild()` already exists in the document, it is automatically removed from its current parent node before being appended to the new parent. It cannot exist in two places at once. 2. **Document Fragment:** If you append a `DocumentFragment`, the fragment itself is not appended; instead, all of its children are moved into the target parent node. 3. **Type Safety:** You cannot append a node to a node type that does not support children (such as a text node or attribute node). Doing so will throw a DOM exception.
Met Element Appendchild
## XML DOM: appendChild() Method
The `appendChild()` method is a fundamental part of the XML DOM (Document Object Model). It is used to append a node as the last child of a specified element node.
If the node you are appending already exists in the document tree, it is automatically removed from its current position and appended to the new position.
---
## Definition and Usage
* The `appendChild()` method adds a node to the end of the list of children of a specified parent node.
* **Return Value:** This method returns the newly appended `Node` object.
---
## Syntax
```javascript
parentNode.appendChild(node);
```
### Parameter Values
| Parameter | Type | Required / Optional | Description |
| :--- | :--- | :--- | :--- |
| `node` | `Node` | **Required** | The node object you want to append to the end of the parent node's children. |
---
## Code Examples
To demonstrate how `appendChild()` works, we will use an external XML file named `books.xml` with the following structure:
```xml
Everyday Italian
Giada De Laurentiis
2005
30.00
Harry Potter
J K. Rowling
2005
29.99
XQuery Kick Start
James McGovern
2003
49.99
Learning XML
Erik T. Ray
2003
39.95
```
### Example 1: Appending a New Element to a Single Node
The following code loads `books.xml` into `xmlDoc` using a helper function `loadXMLDoc()`. It then creates a new `` element and appends it to the end of the first `` element.
```javascript
// Load the XML document
var xmlDoc = loadXMLDoc("books.xml");
// Create a new element node
var newel = xmlDoc.createElement("edition");
// Select the first element
var x = xmlDoc.getElementsByTagName("book");
// Append the new element as the last child of the first element
x.appendChild(newel);
// Output the node name of the newly appended element
document.write(x.getElementsByTagName("edition").nodeName);
```
#### Output:
```text
edition
```
---
### Example 2: Appending Elements with Text Nodes to Multiple Parent Nodes
The following code loops through all `` elements in the XML document, creates a new `` element containing the text node `"First"`, and appends it to each book.
```javascript
// Load the XML document
var xmlDoc = loadXMLDoc("books.xml");
var x = xmlDoc.getElementsByTagName("book");
// Loop through all elements and append a new element
for (var i = 0; i < x.length; i++) {
var newel = xmlDoc.createElement("edition");
var newtext = xmlDoc.createTextNode("First");
// Append the text node to the element
newel.appendChild(newtext);
// Append the element to the current element
x.appendChild(newel);
}
// Output the title and edition for all books
var y = xmlDoc.getElementsByTagName("title");
var z = xmlDoc.getElementsByTagName("edition");
for (var i = 0; i < y.length; i++) {
document.write(y.childNodes.nodeValue);
document.write(" - Edition: ");
document.write(z.childNodes.nodeValue);
document.write("
"); } ``` #### Output: ```text Everyday Italian - Edition: First Harry Potter - Edition: First XQuery Kick Start - Edition: First Learning XML - Edition: First ``` --- ## Key Considerations 1. **Moving Existing Nodes:** If the node passed to `appendChild()` already exists in the document, it is automatically removed from its current parent node before being appended to the new parent. It cannot exist in two places at once. 2. **Document Fragment:** If you append a `DocumentFragment`, the fragment itself is not appended; instead, all of its children are moved into the target parent node. 3. **Type Safety:** You cannot append a node to a node type that does not support children (such as a text node or attribute node). Doing so will throw a DOM exception.
"); } ``` #### Output: ```text Everyday Italian - Edition: First Harry Potter - Edition: First XQuery Kick Start - Edition: First Learning XML - Edition: First ``` --- ## Key Considerations 1. **Moving Existing Nodes:** If the node passed to `appendChild()` already exists in the document, it is automatically removed from its current parent node before being appended to the new parent. It cannot exist in two places at once. 2. **Document Fragment:** If you append a `DocumentFragment`, the fragment itself is not appended; instead, all of its children are moved into the target parent node. 3. **Type Safety:** You cannot append a node to a node type that does not support children (such as a text node or attribute node). Doing so will throw a DOM exception.