Вставьте блок HTML после определенного комментария HTML

Question

Мне интересно, могу ли я вставить HTML-код после определенного комментария HTML, а не в элемент HTML, такой как <div>.

Например, я хотел бы вставить открывающие теги <div id="OUTER"><div id="INNER"> после первого тега комментария ниже; и закрывающие теги </div></div> после второго тега комментария. Кто-нибудь знает, как это сделать?

<!-- Insert Opening Tags Below --> 


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


<!-- Insert Closing Tags Below--> 

Заранее спасибо.

Елена

Answer 1

HTML comment имеет собственный соответствующий узел в иерархии DOM, и это nodeType свойство 8. DOM инспекторов, как Firebug или Google консоли не показывать их, тем не менее, вы можете найти их, просматривая исходный код страницы, если элементы являются дети body элемента, вы можете фильтровать childNodes таким образом:

$('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 
    } 
}); 

Там не имеет смысла делать то, что вы хотите, браузеры показывают только исходную версию документа, который был отправлен сервером, а манипулирование документом с использованием JavaScript не изменяет исходное представление. кроме того, вы можете добавлять только ноды в документ, вы не можете поместить некоторые строки в DOM для анализа в качестве элемента DOM, если только вы не манипулируете innerHTML другого элемента. Я хотел бы предложить обертывание #CONTENT элемента:

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

Каких результатов в:

<!-- Insert Opening Tags Below --> 
<div id="OUTER"> 
    <div id="INNER"> 
     <div id="CONTENT">Page Content Here</div> 
    </div> 
</div> 
<!-- Insert Closing Tags Below-->