在本章中，我們將討論已存在元素的節點。在這節中將學習添加(或插入)新節點 -
- 在現有子節點之前或之後追加新的子節點
- 在文本節點中插入數據
- 添加屬性節點
以下方法可用於將節點元素添加/附加到DOM中 -
appendChild()insertBefore()insertData()
1. 使用appendChild()方法
方法appendChild()用於向現有子節點之後添加新的子節點。
語法
appendChild()方法的語法如下 -
Node appendChild(Node newChild) throws DOMException
其中，
newChild− 要添加的新節點。- 此方法返回已添加的節點(
Node)。
示例
以下示例(append_childnode.html)將XML文檔(node.xml)解析為XML DOM對象，並將新的子元素PhoneNo附加到元素 - <FirstName> 。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else{ // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(create_e);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
</script>
</body>
</html>
在上面的例子中 -
- 使用
createElement()方法，創建一個新元素PhoneNo。 - 使用
appendChild()方法將新元素PhoneNo添加到元素FirstName中。
執行
運行上面示例代碼，得到以下結果 -
2. insertBefore()方法
insertBefore()方法在指定的子節點之前插入新的子節點。
語法insertBefore()方法的語法如下 -
Node insertBefore(Node newChild, Node refChild) throws DOMException
其中，
newChild- 要插入的節點refChild- 是引用節點，即必須在其之前插入新節點的節點。- 此方法返回要插入的節點。
示例
以下示例(insert_nodebefore.html)將XML文檔(node.xml)解析為XML DOM對象，並在指定元素<Email>之前插入新的子元素：Email。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else{ // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
create_e = xmlDoc.createElement("Email");
x = xmlDoc.documentElement;
y = xmlDoc.getElementsByTagName("Email");
document.write("No of Email elements before inserting was: " + y.length);
document.write("<br>");
x.insertBefore(create_e,y[3]);
y=xmlDoc.getElementsByTagName("Email");
document.write("No of Email elements after inserting is: " + y.length);
</script>
</body>
</html>
在上面的例子中 -
- 使用
createElement()方法，創建一個新元素Email。 - 使用
insertBefore()方法在元素Email之前添加新元素Email。 y.length給出新元素之前和之後添加的元素總數。
執行上面示例代碼，得到以下結果 -
3. insertData()方法
insertData()方法在指定的16位單位偏移處插入一個字串。
語法insertData()的語法如下 -
void insertData(int offset, java.lang.String arg) throws DOMException
其中，
offset- 是要插入的字元偏移量。arg- 是插入數據的關鍵字。它用括弧括起兩個參數:offset和arg，用逗號分隔。
示例
以下示例(addtext.html)將XML文檔(node.xml)解析為XML DOM對象，並將指定位置的新數據MiddleName插入到元素<FirstName>。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else{ // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(3,"MiddleName");
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>
x.insertData(6,"MiddleName");− 這裏，x保存指定子名稱的名稱，即<FirstName>。 然後，從位置3開始向該文本節點插入數據 -MiddleName。
執行上面示例代碼，得到以下結果 -
上一篇：
XML DOM創建節點
下一篇：
XML DOM替換節點