insertAdjacentElement不接受文档片段

Question

我正在尝试执行以下代码段

let frag = document.createDocumentFragment();
let divElement = document.createElement('div');
    divElement.insertAdjacentElement('afterend', frag);

我收到以下错误。

未捕获的TypeError：无法在'Element'上执行'insertAdjacentElement'：参数2的类型不是'Element'。

这里有什么限制？有关错误详细信息的参考将不胜感激。请提出另一种有效的方法。

Answer 1

片段可以由multiple元素组成，而不仅仅是单个元素。在这种情况下，如果问题中的技术有效，则insertAdjacentElement将插入multiple元素，而不仅仅是单个元素。 （不称为insertAdjacentElements）

只是不允许。与appendChild不同，insertAdjacentElement不能将片段作为参数。

您可以遍历该片段的所有子代并将其插入afterend：

// Create fragment, append elements
const fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('span')).textContent = 'span';

// Iterate through fragment
for (const element of fragment.children) {
  divElement.insertAdjacentElement('afterend', element);
}

<div id="divElement"></div>

或者您可以直接调用insertAdjacentElement而不是先将元素放入片段中。