代码之家 › 专栏 › 技术社区 › kongaraju

insertAdjacentElement不接受文档片段

dom javascript

kongaraju · 技术社区 · 5 年前

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

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

我遇到了以下错误。

Uncathed TypeError:未能对“Element”执行“insertAdjacentElement”:参数2不是“Element”类型。

这里的限制是什么?如能参考错误细节,将不胜感激。请提出一个有效的替代方案。

2 回复 | 直到 5 年前

Lionel CertainPerformance 2 年前

碎片可以由以下部分组成倍数元素,而不仅仅是单个元素。在这种情况下,如果你问题中的技巧奏效, insertAdjacentElement 将插入倍数元素,而不仅仅是单个元素。(它不叫 insertAdjacentElements )

这是不允许的。不像 appendChild , insert-AdjacentElement 不能将片段作为论据。

您可以迭代片段的所有子元素并插入它们 afterend :

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


// First cast fragment.children from an HTMLCollection to an Array
// Since insertAdjacentElement will remove the element from fragment.children
// It will mutate on each loop causing issue
const childrenAsArray = Array.from(fragment.children);
// Iterate through fragment 
for (const element of childrenAsArray ) {
  divElement.insertAdjacentElement('beforeend', element);
}

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

或者你可以打电话 insert-AdjacentElement 而不是先将元素放入片段中。

brk 5 年前

createDocumentFragment 它从来不是主dom的一部分。在dom树中 document fragment 被它的孩子所取代。它也不能继承自 element 基地阶级。因此,它也不是一个有效的元素。语法 insertAdjacentElement 是 targetElement.insertAdjacentElement(position, element) 其中元素需要是如上链接所述的有效元素。

因此,这个错误

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

2 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

2 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

2 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

2 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前