HTML | DOM insertAdjacentElement() 方法(1)

📌 相关文章

📜 HTML | DOM insertAdjacentElement() 方法(1)

📅 最后修改于: 2023-12-03 15:15:35.253000 🧑 作者: Mango

HTML | DOM insertAdjacentElement() 方法

insertAdjacentElement() 方法可以在指定元素相对于其本身的位置插入一个新的元素节点。

语法

element.insertAdjacentElement(position, element);

参数

position：插入位置。
- 可接收的值有：
  - "beforebegin"：在元素本身的前面插入；
  - "afterbegin"：在元素内部的第一个子元素前插入；
  - "beforeend"：在元素内部的最后一个子元素后插入；
  - "afterend"：在元素本身的后面插入。
element：被插入的元素节点。

示例

<!DOCTYPE html>
<html>
<head>
	<title>insertAdjacentElement() Demo</title>
</head>
<body>
	<div id="demo">Hello, world!</div>
	<script>
		var newElement = document.createElement("p");
		newElement.innerText = "Insert this paragraph";
		document.getElementById("demo").insertAdjacentElement("beforebegin", newElement);
	</script>
	<p>After the &lt;div&gt; element.</p>
</body>
</html>

在这个示例中，我们插入了一个新的 <p> 元素节点，位置在 <div> 元素节点的前面。最终渲染出来的效果如下：

Insert this paragraph
Hello, world!
After the <div> element.

注意事项

insertAdjacentElement() 方法只能插入元素节点，不能插入文本节点或其他节点类型；
插入的元素节点不应该是文档中已经存在的节点，否则会从其当前的位置中删除该节点；
insertAdjacentElement() 方法仅在文档树中存在的元素节点上有效，不支持在文档片段中使用；
插入的元素在添加到文档树之前不会被解析和执行，因此可能存在某些限制，例如，CSS 样式表可能无法应用到插入的元素节点上；
在一些旧的浏览器版本中，insertAdjacentElement() 可能并不是很稳定或者功能不完善，所以最好还是使用其他的方法进行 DOM 操作。