CODEWITHSUNDEEP
javascripthtmldocumentfragment
KevBot
KevBot

Reputation: 18898

Can I convert an HTML comment to actual HTML using JavaScript?

If I insert a comment node into a document fragment, can I convert it to HTML later? Example:

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

fragment.appendChild(comment);

// Convert comment into actual HTML?

What this would look like inside of a fragment:

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

And how it should be when done (actual DOM):

<div>Testing</div>

Background:

There are many limitations for inserting HTML into a fragment. Fragments don't support innerHTML or insertAdjacentHTML etc. There are other methods for getting HTML into fragments, but they drop certain elements and leave only the inner text. For example, creating a fragment with the createRange API drops those types of nodes and I will be left with a fragment with just the text node "Data"

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

The hope is that if I can convert a comment into actual DOM, that it will work as expected.

Upvotes: 0

Views: 1601

Answers (5)

Paweł
Paweł

Reputation: 4516

You can get your comments with element.childNodes method, then use textContent method to get the content of comment, then change it into HTML Element with innerHTML method, then remove the comment node and replace it with 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>

Upvotes: 1

Marat Tanalin
Marat Tanalin

Reputation: 14123

Text content of an HTML comment can be accessed via the nodeValue property of the Node interface or the data property of the CharacterData interface that the HTML Comment interface inherits from:

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

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

Fwiw, I have a blog post about using HTML comment as data container.

Upvotes: 1

Cuzi
Cuzi

Reputation: 1026

For the entire body you can use that snippet:

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

Upvotes: 3

gyre
gyre

Reputation: 16777

It sounds like your underlying problem is that you need to stuff HTML text into a DocumentFragment, so here is a helper function to do so for you.

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)

Upvotes: 2

Colm Seale
Colm Seale

Reputation: 179

Something like this would do the trick

 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;

Upvotes: 2

Related Questions