我正在创建如下文档片段:
var aWholeHTMLDocument = '<!doctype html> <html><head></head><body><h1>hello world</h1></body></html>';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;
变量 aWholeHTMLDocument 包含一个长字符串，它是页面的整个 html 文档，我想将它插入到我的 fragment 中以生成和操作动态 DOM。
我的问题是，一旦我将该字符串添加到 frag.innerHTML 中，它不应该加载该字符串并将其转换为 DOM 对象吗？
设置 innerHTML 后，我不应该通过属性访问 DOM 吗？
我试过 frag.childNodes 但它似乎不包含任何东西，我只想访问新创建的 DOM。
最佳答案
同时 DocumentFragment不支持 innerHTML , <template> 会。
content <template> 的属性元素是 DocumentFragment所以它的行为方式相同。例如，您可以这样做:
var tpl = document.createElement('template');
tpl.innerHTML = '<tr><td>Hello</td><td>world</td></tr>';
document.querySelector('table').appendChild(tpl.content);
上面的例子很重要，因为你不能用 innerHTML 做到这一点和例如一个<div> , 因为 <div>不允许<tr>元素作为 child 。
注意: A DocumentFragment仍会剥离 <head>和 <body>标签，所以它也不会做你想要的。你真的需要创建一个全新的 Document .
关于javascript - 使用 document.createDocumentFragment() 和 innerHTML 来操作 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8202195/