HTML5中的DOM扩展（三）DOM插入标记方法总结

2023-12-15 05:54:31

插入标记

在HTML5中，我们可以使用多种方法来向DOM中插入标记。这些方法包括：

innerHTML ：将HTML代码直接插入到元素的内部。
insertAdjacentHTML ：将HTML代码插入到元素的相邻位置。
insertBefore ：在元素之前插入一个新的元素。
appendChild ：在元素的最后插入一个新的元素。
replaceChild ：用一个新的元素替换一个现有的元素。
removeChild ：从元素中删除一个元素。

使用示例

下面是这些方法的一些使用示例：

innerHTML ：

<div id="myDiv"></div>

<script>
  document.getElementById("myDiv").innerHTML = "Hello World!";
</script>

这段代码将在<div>元素中插入"Hello World!"文本。

insertAdjacentHTML ：

<div id="myDiv"></div>

<script>
  document.getElementById("myDiv").insertAdjacentHTML("beforebegin", "Hello ");
  document.getElementById("myDiv").insertAdjacentHTML("afterbegin", "World!");
</script>

这段代码将在<div>元素之前插入"Hello "文本，并在<div>元素之后插入"World!"文本。

insertBefore ：

<div id="myDiv"></div>

<script>
  var newDiv = document.createElement("div");
  newDiv.innerHTML = "Hello World!";

  document.getElementById("myDiv").insertBefore(newDiv, document.getElementById("myDiv").firstChild);
</script>

这段代码将在<div>元素的第一个子元素之前插入一个新的<div>元素，其中包含"Hello World!"文本。

appendChild ：

<div id="myDiv"></div>

<script>
  var newDiv = document.createElement("div");
  newDiv.innerHTML = "Hello World!";

  document.getElementById("myDiv").appendChild(newDiv);
</script>

这段代码将在<div>元素的最后添加一个新的<div>元素，其中包含"Hello World!"文本。

replaceChild ：

<div id="myDiv">
  <p>Old Content</p>
</div>

<script>
  var newP = document.createElement("p");
  newP.innerHTML = "New Content";

  document.getElementById("myDiv").replaceChild(newP, document.getElementById("myDiv").firstChild);
</script>

这段代码将<div>元素的第一个子元素替换为一个新的<p>元素，其中包含"New Content"文本。

removeChild ：

<div id="myDiv">
  <p id="myP">Old Content</p>
</div>

<script>
  document.getElementById("myDiv").removeChild(document.getElementById("myP"));
</script>