新增或刪除 HTML dom元素

文件物件模型(Document Object Model，簡稱DOM)，是W3C組織推薦的處理可擴充標誌語言的標準程式介面。在網頁上，組織頁面(或文檔)的物件被組織在一個樹狀結構中，用來表示文檔中物件的標準模型就稱為DOM，本章內容我們就分享給大家關於添加或刪除HTML dom元素的教程，趕緊來學習吧。

建立新的HTML 元素

#如需在HTML DOM 中新增元素，您必須先建立該元素（元素節點），然後向一個已存在的元素追加該元素。

<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>

這段程式碼建立新的

元素：

var para=document.createElement("p");

如需向

元素添加文本，您必須先建立文本節點。這段程式碼建立了一個文字節點：

var node=document.createTextNode("这是一个新段落。");

然後您必須向

元素追加這個文字節點：

para.appendChild(node);

最後您必須向一個已有的元素追加這個新元素。

這段程式碼找到一個已有的元素：

var element=document.getElementById("div1");

以下程式碼在已存在的元素後面新增元素：

element.appendChild(para);

刪除現有的HTML元素

<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>

如果能夠在不引用父元素的情況下刪除某個元素，那就太好了。
不過很遺憾。 DOM 需要清楚您需要刪除的元素，以及它的父元素。

這是常用的解決方案：找到您希望刪除的子元素，然後使用其parentNode 屬性來找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

以上就是關於新增或刪除HTML dom元素的相關教程，希望能幫助大家。

相關推薦：

如何使用DOM來分配事件

#DOM節點刪除中empty和remove區別

jQuery操作DOM的方法

以上是新增或刪除 HTML dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！