1

I am wondering if I can insert HTML code after a specific HTML comment rather than within an HTML element such as <div>.

For example, I would like to insert the opening tags <div id="OUTER"><div id="INNER"> after the first comment tag below; and the closing tags </div></div> after the second comment tag. Does somebody know how to go about this?

<!-- Insert Opening Tags Below -->


<div id="CONTENT">Page Content Here</div>


<!-- Insert Closing Tags Below-->

Thank you in advance.

Elena

elena nincevic
  • 83
  • 1
  • 1
  • 10
  • I don't think that comments are part of the DOM. – Ofir Baruch Sep 02 '13 at 18:14
  • 1
    Comments can go anywhere. I don't get the question. –  Sep 02 '13 at 18:14
  • Just found: http://stackoverflow.com/questions/1623734/selecting-html-comments-with-jquery – Ofir Baruch Sep 02 '13 at 18:16
  • @OfirBaruch so you are saying that I cannot target the comment tags since they are not part of the DOM, correct? – elena nincevic Sep 02 '13 at 18:20
  • Comments are for developer convenience. You can certainly nest one div inside another without worrying about where the comments go. Most of my documents have no comments at all. –  Sep 02 '13 at 18:23
  • @elenanincevic Comments have their corresponding nodes in the DOM, you can select them. – Ram Sep 02 '13 at 18:29
  • @Jeffman I am aware of what HTML comments are for, but this is irrelevant to my question. Tnank you for your input anyway. – elena nincevic Sep 02 '13 at 18:30
  • @undefined Are you able to show me an example on how to do this? Thank you in advance. – elena nincevic Sep 02 '13 at 18:33
  • I misunderstood the question. You are talking about inserting elements, not tags. That is why I asked for clarification in my first comment. –  Sep 02 '13 at 18:34

1 Answers1

2

HTML comment has it's own corresponding Node in DOM hierarchy and it's nodeType property is 8. DOM inspectors like Firebug or Google Console do not show them, however, you can find them by viewing source of the page, if elements are children of the body element, you can filter the childNodes this way:

$('body').contents().each(function(i, elem){
    if (elem.nodeType == 8) {
       // This is a Comment node
       // Comment { data=" Insert Closing Tags Below", length=26, nodeType=8, more...}
       // You can select all the next sibilngs of the first
       // Comment node including the second Comment Node 
       // and then wrap all of them 
    }
});

There is no point in doing what you want, browsers only show the initial version of the document that has been sent by the server and manipulating document using JavaScript doesn't change the source view. furthermore, you can only add Nodes to the document, you can't put some strings in DOM to be parsed as a DOM element, unless you are manipulating innerHTML of another element. I would suggest wrapping the #CONTENT element:

$('#CONTENT').wrap('<div id="OUTER"><div id="INNER"></div></div>');

Which results in:

<!-- Insert Opening Tags Below -->
<div id="OUTER">
   <div id="INNER">
      <div id="CONTENT">Page Content Here</div>
   </div>
</div>
<!-- Insert Closing Tags Below-->
Ram
  • 143,282
  • 16
  • 168
  • 197