添加和移除元素

添加和移除元素

使用以下方法创建新节点：

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>

移除元素

要删除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);

替换元素

要替换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 段落的新段落元素。