HTML DOM--元素

创建新的 HTML 元素--createElement()

如需向HTML DOM添加元素，您首先必须创建该元素，然后把它追加到已有的元素上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</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>

实例解析

这段代码创建了一个新的 元素：

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

如需向 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：

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

然后您必须向 元素追加文本节点：

    para.appendChild(node); 
  

最后，您必须向已有元素追加这个新元素。

这段代码查找到一个已有的元素：

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

这段代码向这个已存在的元素追加新元素：

    element.appendChild(para); 
  

创建新的 HTML 元素-- insertBefore()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

删除已有的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</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 文档包含一个带有两个子节点（两个 元素）的 <div> 元素：

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

查找 id="div1" 的元素：

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

查找 id="p1" 的 元素：

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

从父元素中删除子元素：

    parent.removeChild(child); 
  

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

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

替换 HTML 元素

如果替换 HTML DOM中的元素，请使用 replaceChild()方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

猜你喜欢