0

如果我将注释节点插入到文档片段中，我可以稍后将其转换为 HTML 吗？例子：

var fragment = document.createDocumentFragment();
var comment = document.createComment('<div>Testing</div>');

fragment.appendChild(comment);

// Convert comment into actual HTML?

这在片段内部会是什么样子：

<!--<div>Testing</div>-->

以及完成后应该如何（实际 DOM）：

<div>Testing</div>

背景：

将 HTML 插入片段有很多限制。片段不支持innerHTML等insertAdjacentHTML。还有其他方法可以将 HTML 放入片段中，但它们会删除某些元素并只留下内部文本。例如，使用createRangeAPI 创建片段会删除这些类型的节点，我将留下一个只有文本节点“数据”的片段

var fragment = document.createRange().createContextualFragment('<td>Data</td>');

希望如果我可以将评论转换为实际的 DOM，它将按预期工作。

4

5 回答 5

3

对于整个身体，您可以使用该片段：

 var body = document.getElementsByTagName('body')[0],
 			bodyHtml = body.innerHTML;
 while (bodyHtml.indexOf("<!--") !== -1) { // will replace all the comments with empty string
    bodyHtml = bodyHtml.replace("<!--", "").replace("-->", ""); 
 }
 body.innerHTML = bodyHtml; 
Hello
<h1>hi</h1>

<!--<div>Testing</div>-->
<!--<div>Testing</div>-->

于 2017-02-26T00:02:22.243 回答
2

像这样的东西可以解决问题

 var element = document.getElementById("whatever"); // get the parent element
 var comment = element.innerHTML; // get the thml
 var html = comment.replace("<!--", "").replace("-->", ""); // remove the comment
 element.innerHTML = html;
于 2017-02-25T23:49:54.177 回答
2

听起来您的潜在问题是您需要将 HTML 文本填充到 aDocumentFragment中，因此这里有一个帮助函数可以为您完成此操作。

var container = document.createElement('div')

function createFragmentWithHTML (html, doc) {
  var result = (doc || document).createDocumentFragment()
  container.innerHTML = html
  while (container.firstChild) result.appendChild(container.firstChild)
  return result
}


var fragment = createFragmentWithHTML('<div>Testing</div><p><strong>More text</strong></p>')

// do whatever you want with `fragment`
document.body.appendChild(fragment)

于 2017-02-25T23:55:53.217 回答
1

可以通过接口的属性或HTML接口继承自的接口的nodeValue属性来访问 HTML 注释的文本内容：NodedataCharacterDataComment

<!--<div>Example</div>-->

var code = comment.data; /* Now contains `<div>Example</div>` text */
var code = comment.nodeValue; // Same result.

Fwiw，我有一篇关于使用 HTML 评论作为数据容器的博客文章。

于 2017-02-26T00:00:55.413 回答
1

你可以用method获取你的评论element.childNodes，然后用textContentmethod获取评论的内容，然后用method把它改成HTML Element innerHTML，然后去掉评论节点，用Element Node替换。

parseComments('container');

function parseComments(getContainerId){
	var container = document.getElementById(getContainerId);
	var nodes = container.childNodes;
	for(var i=0;i<nodes.length;i++){
		if(nodes[i].nodeType===8){
			var virtualCont = document.createElement('DIV');
			var getContent = nodes[i].textContent;
			virtualCont.innerHTML = getContent;
			container.removeChild(nodes[i]);
			if(nodes[i+1]){
				container.insertBefore(virtualCont.children[0],nodes[i+1]);
			} else {
				container.appendChild(virtualCont.children[0]);
			}
		}
	}
}
<div id="container">
  <h1>some header A</h1>
  <!--<p>some hidden content A</p>-->
  <p>some content</p>
  <!--<p>some hidden content B</p>-->
  <p>another content</p>
  <!--<h1>some hidden header B</h1>-->
  <!--<p>another hidden content C</p>-->
</div>

于 2017-02-26T00:14:10.547 回答