Question

我在DocumentFragment内部工作，并尝试在其中插入HTML。我们知道DocumentFragment没有innerHTML setter，所以我试图在DocumentFragment中插入一个临时节点，并在使用insertAdjacentHTML后插入HTML。然后我会删除临时元素，并留下一个包含我想要的DOM的片段。

示例：（故意是错误的）

var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));

// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);

// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');

fragment.removeChild(temporaryElement);

我可以清楚地看到临时元素有一个parentNode，为什么我会收到此错误？

Answer 1

你可以：

创建<template>元素
通过其innerHTML属性
从content属性获取DocumentFragment。

＆＃13;

//Use a template
var template = document.createElement( 'template' )
template.innerHTML = '<td>Hello<td>World'

//Get the document fragment
var fragment = template.content
Row.appendChild( fragment )

＆＃13;

<table>
  <tr id=Row></tr>
</table>

＆＃13;

Answer 2

所以我很确定你想要一个解析的div，对吗？所以要做到这一点，你会这样做。

var fragment = document.createElement("div");
fragment.innerHTML = "Some crazy custom HTML..";

//This will output exactly what your code should do
console.log(fragment);

在DocumentFragment中：无法在'Element'上执行'insertAdjacentHTML'：该元素没有父元素

2 个答案: