DOM 元素
創(chuàng)建新的 HTML 元素
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必須首先創(chuàng)建該元素(元素節(jié)點),然后向一個已存在的元素追加該元素。實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <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>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
例子解析:
這段代碼創(chuàng)建新的<p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必須首先創(chuàng)建文本節(jié)點。這段代碼創(chuàng)建了一個文本節(jié)點:
var node=document.createTextNode("這是一個新段落。");
然后您必須向 <p> 元素追加這個文本節(jié)點:
para.appendChild(node);
最后您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素:
var
element=document.getElementById("div1");
以下代碼在已存在的元素后添加新元素:
element.appendChild(para);
刪除已有的 HTML 元素
以下代碼演示了如何刪除元素:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <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>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例解析
這個 HTML 文檔含有擁有兩個子節(jié)點(兩個 <p> 元素)的 <div> 元素:
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<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);
![]() | 如果能夠在不引用父元素的情況下刪除某個元素,就太好了。 不過很遺憾。DOM 需要清楚您需要刪除的元素,以及它的父元素。 |
---|
這是常用的解決方案:找到您希望刪除的子元素,然后使用其 parentNode 屬性來找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
child.parentNode.removeChild(child);
HTML DOM 教程
在我們的 JavaScript 教程的 HTML DOM 部分,您已經學到了:
如何改變 HTML 元素的內容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件作出反應
如何添加或刪除 HTML 元素
如果您希望學到更多有關使用 JavaScript 訪問 HTML DOM 的知識,請訪問我們完整的 HTML DOM 教程。