代码之家 › 专栏 › 技术社区 › 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 3 年前

碎片可以由以下部分组成倍数元素,而不仅仅是单个元素。在这种情况下,如果你问题中的技巧奏效, 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) 其中元素需要是如上链接所述的有效元素。

因此,这个错误

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前