我可以使用insertAdjacentHTML插入DOM元素吗？

Question

insertAdjacentHTML 函数需要两个参数：

• 位置 ("beforebegin", "afterbegin", "beforeend", "afterend")
• 待插入的 HTML 代码（将被转换为 DOM 元素）

我能否将一个 DOM 元素作为第二个参数传递给它？

- Yukulélé

Answer 1

虽然你无法直接传递DOM元素，但可以通过将element.outerHTML传递给insertAdjacentHTML的第二个参数来传递HTML字符串表示。

示例：

const parent = document.querySelector('.parent');
const child = document.createElement('p');

child.innerHTML = 'Awesome!';
parent.insertAdjacentHTML('beforeend', child.outerHTML);

// <div class="parent">
//   <p>Awesome!</p>
// </div>

- João Cunha

Answer 2

insertAdjacentHTML文档明确指出，第一个参数必须是字符串类型。

element.insertAdjacentHTML(position, text);

position是相对于元素的位置，必须是以下字符串之一：
"beforebegin", "afterbegin", "beforeend", "afterend"

第二个参数不是很清楚应该传什么，但测试表明在第二个参数上会内部执行toString()方法，因此答案是： 是的，在大多数情况下可以将DOM元素作为第二个参数传递，但实际上是不行的，它不会被追加到页面中，而只会得到字符串。

[object HTMLDivElement]

由于DOM元素被转换为字符串，这意味着函数始终期望第二个参数是一个有效的HTML字符串，而不是DOM元素。

这里有一个快速测试

var d1 = document.getElementById('one'); 

var d3 = document.createElement('div');
d3.innerHTML = 'three';

d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

d1.insertAdjacentHTML('afterend', d3);

<div id="one">one</div>

有其他更适合实际DOM元素的方法，例如appendChild、insertBefore等。使用哪种方法取决于要插入元素的位置等因素，但可以在与insertAdjacentHTML中提供的四个选项相同的位置进行插入，通常不难完成。

还有一个Element.insertAdjacentElement()方法，它的用法类似于insertAdjacentHTML，但接受一个DOM节点而不是HTML字符串。

- adeneo

---

谢谢您的回答，但我的问题是关于第二个参数。 - Yukulélé

@Yukulélé - 哦，好的。已经编辑了答案。 - adeneo

Answer 3

.insertAdjacentHTML()只接受将被解析为HTML并插入（类似于innerHTML）的字符串。

要插入DOM元素，您可以使用.insertAdjacentElement()

MDN：https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement

- Yukulélé

---

为什么最佳答案在这里的最下面？ - Gust van de Wal