Question

如果我将注释节点插入文档片段，我可以稍后将其转换为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转换为片段，但它们会丢弃某些元素并仅保留内部文本。例如，使用createRange API创建一个片段会丢弃这些类型的节点，我将留下一个只包含文本节点的片段＆＃34;数据＆＃34;

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

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

Answer 1

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

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

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

Answer 3

听起来你的根本问题是你需要将HTML文本填充到DocumentFragment中，所以这里有一个帮助函数。

＆＃13;

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)

＆＃13;

Answer 4

可以通过Node接口的nodeValue属性或HTML {{3的CharacterData接口的data属性访问HTML注释的文本内容接口继承自：

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

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

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

Answer 5

您可以使用element.childNodes方法获取评论，然后使用textContent方法获取评论内容，然后使用innerHTML方法将其更改为HTML元素，然后删除评论节点并用Element Node替换它。

＆＃13;

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

＆＃13;

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

＆＃13;

我可以使用JavaScript将HTML评论转换为实际的HTML吗？

5 个答案: