在文档片段中：无法在"元素"上执行'insertAdjacentHTML'：元素没有父元素

Question

我在文档范围内工作，并试图将HTML插入其中。我们知道，文档范围没有InnerHTML设置器，因此我尝试将临时节点插入文档范围，并在使用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);

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

Answer 1

您可以：

1. 创建<template>元素，
2. 通过其innerHTML属性添加字符串内容，
3. 从其content属性中获取文档范围。

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

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