1

我在 DocumentFragment 内部工作，并试图将 HTML 插入其中。我们知道 DocumentFragment 没有 innerHTML 设置器，所以我尝试在 DocumentFragment 中插入一个临时节点，并在它之后使用insertAdjacentHTML. 然后我会删除临时元素，并留下一个带有我想要的 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，那么为什么会出现此错误？

4

2 回答 2

5

你可以：

  1. 创建一个<template>元素，
  2. innerHTML通过其属性添加字符串内容，
  3. 从其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>

于 2017-03-01T09:20:11.723 回答
0

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

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

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

于 2017-02-27T19:29:29.003 回答