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

Question

insertAdjacentHTML 需要2个参数:

• 位置("beforebegin","afterbegin","beforeend","afterend")
• html(将从文本转换为DOM)

我可以将DOM元素作为第二个参数传递吗？

Answer 1

因为insertAdjacentHTML,文档清楚地说明第一个参数必须是string类型

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字符串.

Answer 2

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

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

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

Answer 3

虽然您无法直接传递DOM元素,但可以element.outerHTMLinsertAdjacentHTML使用HTML字符串表示传递给Feed 的第二个参数.

例:

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>