自學javascript筆記_自用_解析W3school的代碼_創建刪除節點

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

這裏是用html dom添加一句話。這首先需要創建html元素。

document.createElement(''p'');就是創建了一個<P>元素;

下面一句是創建了一個文本節點。第三句就是把這個文本節點放在了<P>元素裏了,就是para="<P>這是新段落</p>";

最後是把這個para放在了div元素裏了。這就完成了。

即是在已有的元素裏面追加了一個元素又在元素中加了一個文本節點。已有的元素叫做父親元素

(必須是在已有的元素裏添加啊?)

那麼刪除html元素的話,就是找到父親元素和要刪除的元素,用父親元素刪除其中的孩子元素。代碼是下面的:

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

appendchild()和removechild()函數都是父親元素的方法。


這是W3裏的提示:如果能夠在不引用父元素的情況下刪除某個元素,就太好了。不過很遺憾。DOM 需要清楚您需要刪除的元素,以及它的父元素。





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章