DOM 元素
創(chuàng)建新的 HTML 元素
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個已存在的元素追加該元素。實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
例子解析：
這段代碼創(chuàng)建新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必須首先創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建了一個文本節(jié)點(diǎn)：
var node=document.createTextNode("這是一個新段落。");
然后您必須向 <p> 元素追加這個文本節(jié)點(diǎn)：
para.appendChild(node);
最后您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素：
var
element=document.getElementById("div1");
以下代碼在已存在的元素后添加新元素：
element.appendChild(para);
刪除已有的 HTML 元素
以下代碼演示了如何刪除元素：
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析
這個 HTML 文檔含有擁有兩個子節(jié)點(diǎn)（兩個 <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 部分，您已經(jīng)學(xué)到了：
如何改變 HTML 元素的內(nèi)容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件作出反應(yīng)
如何添加或刪除 HTML 元素
如果您希望學(xué)到更多有關(guān)使用 JavaScript 訪問 HTML DOM 的知識，請?jiān)L問我們完整的 HTML DOM 教程。