在JavaScript中的指定位置插入指定元素？

Javascript 提供了“ insertAdjacentElement() ”以在指定位置插入现有元素。如果有多个具有相同名称的元素，则在访问数组元素时使用索引来访问它们。

语法

node.insertAdjacentHTML(position, element);

示例1

在以下示例中，实际上在并行span1，span2和header中有3个元素。使用方法insertAdjacentElement()，我们将元素span1放置在标题下方，如输出所示。

<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
   var s = document.getElementsByTagName("span")[0];
   var h = document.getElementById("H2");
   h.insertAdjacentElement("afterend", s);
</script>
</body>
</html>

输出结果

My span2
My Header
My span1

示例2

在以下示例中，实际上在并行span1，span2和header中有 3个元素。使用方法insertAdjacentElement()，我们将元素span2放置在标题下方，如输出所示。如果有多个元素，则通过索引访问像数组一样的元素。

<html>
<body>
<span>My span1</span>
<span>My span2</span>
<h2 id="H2">My Header</h2>
<script>
   var s = document.getElementsByTagName("span")[1];
   var h = document.getElementById("H2");
   h.insertAdjacentElement("afterend", s);
</script>
</body>
</html>

输出结果

My span1
My Header
My span2

基础教程