HTML DOM - 元素


添加、刪除和替換 HTML 元素。


創建新的 HTML 元素 - createElement()

如需向 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>

嚐試一下 »


實例解析

這段代碼創建了一個新的 <p> 元素:

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

如需向 <p> 元素添加文本,您首先必須創建文本節點。這段代碼創建文本節點:

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

然後您必須向 <p> 元素追加文本節點:

para.appendChild(node);

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

這段代碼查找到一個已有的元素:

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

這段代碼向這個已存在的元素追加新元素:

element.appendChild(para);


創建新的 HTML 元素 - insertBefore()

上一個例子中的 appendChild() 方法,將新元素作為父元素的最後一個子元素進行添加。

如果不希望如此,您可以使用 insertBefore() 方法:

 實例

<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"); var child=document.getElementById("p1"); element.insertBefore(para,child); </script>

嚐試一下 »


刪除已有的 HTML 元素

如需刪除 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>

嚐試一下 »


實例解析

這個 HTML 文檔包含一個帶有兩個子節點(兩個 <p> 元素)的 <div> 元素:

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

查找 id="div1" 的元素:

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

查找 id="p1" 的 <p> 元素:

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

從父元素中刪除子元素:

parent.removeChild(child);

lamp 能否在不引用父元素的情況下刪除某個元素?
很抱歉。DOM 需要了解您需要刪除的元素,以及它的父元素。

這裏提供一個常用的解決方法:找到您需要刪除的子元素,然後使用 parentNode 屬性來查找其父元素:

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


替換 HTML 元素

如需替換 HTML DOM 中的元素,請使用 replaceChild() 方法:

實例

<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("這是一個新的段落。"); para.appendChild(node); parent.replaceChild(para,child); </script>

嚐試一下 »