XML DOM 添加節點 · W3School Xml 教程

# XML DOM 添加節點 ## 嘗試一下 - 實例下面的實例使用 XML 文件 [books.xml](images/books.xml)。函數 [loadXMLDoc()](dom-loadxmldoc.html)，位于外部 JavaScript 中，用于加載 XML 文件。 [在最后一個子節點之后添加一個節點](/try/try.php?filename=try_dom_createelement2) 本例使用 appendChild() 方法向一個已有的節點添加一個子節點。 ``` <!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> ``` [在指定的子節點之前添加一個節點](/try/try.php?filename=try_dom_insertbefore) 本例使用 insertBefore() 方法在一個指定的子節點之前插入一個節點。 ``` <!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> ``` [添加一個新屬性](/try/try.php?filename=try_dom_createattribute3) 本例使用 setAttribute() 方法添加一個新的屬性。 ``` <!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> ``` [向文本節點添加數據](/try/try.php?filename=try_dom_insertdata) 本例使用 insertData() 把數據插入一個已有的文本節點中。 ``` <!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> ``` ## 添加節點 - appendChild() appendChild() 方法向一個已有的節點添加一個子節點。新節點會添加（追加）到任何已有的子節點之后。 **注意：**如果節點的位置很重要，請使用 insertBefore() 方法。下面的代碼片段創建一個元素（<edition>），并把它添加到第一個 <book> 元素的最后一個子節點后面： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); newel=xmlDoc.createElement("edition"); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newel); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 創建一個新節點 <edition> 3. 把這個節點追加到第一個 <book> 元素遍歷并向所有 <book> 元素追加一個元素：[嘗試一下](/try/try.php?filename=try_dom_createelement) ## 插入節點 - insertBefore() insertBefore()方法用于在指定的子節點之前插入節點。在被添加的節點的位置很重要時，此方法很有用： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); newNode=xmlDoc.createElement("book"); x=xmlDoc.documentElement; y=xmlDoc.getElementsByTagName("book")[3]; x.insertBefore(newNode,y); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 創建一個新的元素節點 <book> 3. 把這個新節點插到最后一個 <book> 元素節點之前如果 insertBefore() 的第二個參數是 null，新節點將被添加到最后一個已有的子節點之后。 **x.insertBefore(newNode,null)** 和 **x.appendChild(newNode)** 都可以向 x 追加一個新的子節點。 ## 添加新屬性 addAtribute() 這個方法是不存在的。如果屬性不存在，則 setAttribute() 可創建一個新的屬性： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book'); x[0].setAttribute("edition","first"); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 把第一個 <book> 元素的 "edition" 屬性的值設置（創建）為 "first" **注意：**如果屬性已存在，setAttribute() 方法將覆蓋已有的值。 ## 向文本節點添加文本 - insertData() insertData() 方法將數據插入已有的文本節點中。 insertData() 方法有兩個參數： * offset - 在何處開始插入字符（以 0 開始） * string - 要插入的字符串下面的代碼片段將把 "Easy" 添加到已加載的 XML 的第一個 <title> 元素的文本節點： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.insertData(0,"Easy "); ```