添加和移除元素
使用以下方法创建新节点:
element.cloneNode() 克隆元素并返回结果节点。
document.createElement(element) 创建一个新的元素节点。
document.createTextNode(text) 创建一个新的文本节点。
例如:
var node = document.createTextNode("一些新的文本");
这将创建一个新的文本节点,但它将不会出现在文档中,直到您使用以下方法之一将其附加到现有元素:
element.appendChild(newNode) 将一个新的子节点添加到元素作为最后一个子节点。
element.insertBefore(node1, node2) 在节点2之前插入node1作为子节点。
例如:
<div id ="demo">一些文本</div> <script> //创建一个新的段落 var p = document.createElement("p"); var node = document.createTextNode("一些新的文本"); //添加文本到段落 p.appendChild(node); var div = document.getElementById("demo"); //将段落添加到div中 div.appendChild(p); </script>
var el = document.("li");
var txt = document.createTextNode("B");
el.appendChild(txt);
var ul = document.getElementById("");
ul.(el);
移除元素
要删除HTML元素,您必须选择元素的父项并使用 removeChild(node) 方法。
例如:
<div id="demo"> <p id="p1">这是一个段落.</p> <p id="p2">这是另外一个段落.</p> </div> <script> var parent = document.getElementById("demo"); var child = document.getElementById("p1"); parent.removeChild(child); </script>
这样会从页面中删除 id ="p1" 的段落。
提示: 实现相同结果的另一种方法是使用 parentNode 属性来获取要删除的元素的父项:
var child = document.getElementById("p1"); child.parentNode.removeChild(child);
var par = document.getElementById("par");
var node = document.getElementById("node");
.();
替换元素
要替换HTML元素,使用 element.replaceChild(newNode,oldNode) 方法。
例如:
<div id="demo"> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </div> <script> var p = document.createElement("p"); var node = document.createTextNode("这是新的文本"); p.appendChild(node); var parent = document.getElementById("demo"); var child = document.getElementById("p1"); parent.replaceChild(p, child); </script>
提示: 上面的代码创建一个替换现有 p1 段落的新段落元素。