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

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

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

var fragment = document.createElement("div");
fragment.innerHTML = "Some crazy custom HTML..";

//This will output exactly what your code should do
console.log(fragment);

Answer 2

您可以：

创建一个 <template> 元素，
通过 innerHTML 属性,
从其 content 属性中获取一个 DocumentFragment。

//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 )

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

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

In DocumentFragment: Failed to execute 'insertAdjacentHTML' on 'Element': The element has no parent

javascript

html

documentfragment

html5-template