HTML DOM - 元素

和替换 HTML 元素。

创建新的 HTML 元素 - appendChild()

如需向 HTML DOM 。

实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

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

例子解释

的 <p> 元素:

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

如需向 <p>

var node=document.createTextNode("This is a new paragraph.");

向 <p> 本节点:

para.appendChild(node);

新元素。

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

新元素:

element.appendChild(para);

创建新的 HTML 元素 - insertBefore()

中的 appendChild()

以使用 insertBefore() 方法:

实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
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">This is a paragraph.</p>
<p id="p2">This is another paragraph.</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">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

查找 id="div1" 的元素:

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

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

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

parent.removeChild(child);

提示:

很抱歉。DOM 。

parentNode 51help.tk

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

替换 HTML 元素

如需替换 HTML DOM 请使用 replaceChild() 方法:

实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

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