例如,如果想要在div中新建一個段落p那么需要分成以下幾步完成:
1,創建新的<p>元素。createElement(“節點名”):
var para = document.createElement(“p”);
2,創建p元素中的文本,文本為一個文本節點。createTextNode(“文本”):
var text_node = document.createTextNode(“這是一個追加的段落”);
3,將文本節點追加到p元素后。追加用 父節點.appendChild(子節點):
para.appendChild(text_node);
4,找到容納p節點的父節點
var element = document.getElementById(“s”);
5,將p節點追加到父節點后:
element.appendChild(para);
完整代碼如下:
<html> <head> </head> <body> <div id="s"> <p>這是一個普通段落</p> <p>在下面追加一個段落</p> </div> <script> //創建一個節點 var para = document.createElement("p"); //創建文本節點 var text_node = document.createTextNode("這是一個追加的段落"); //將文本節點追加到p節點后 para.appendChild(text_node); //將處理好的段落標記追加到網頁中的已知節點 var element = document.getElementById("s"); element.appendChild(para); </script> </body></html>刪除元素分為以下幾步 1. 找到待刪除的元素 2. 找到待刪除元素的父元素 3. 刪除元素。父節點.removeChild(子節點)
也可以用parentNode獲取一個元素的父元素:
child.parentNode.removeChild(child);
<html> <body> <div id="div1"> <p>這是一個普通的段落</p> <p>刪除下面的段落</p> <p id="delete">該段落應該被刪除</p> </div> <script> var pare = document.getElementById("div1"); var child = document.getElementById("delete"); pare.removeChild(child); </script> </body></html>新聞熱點
疑難解答