在特定 HTML 注释后插入 HTML 块答案

【问题标题】：Insert HTML block after a specific HTML comment在特定 HTML 注释后插入 HTML 块
【发布时间】：2013-09-02 18:12:54
【问题描述】：

我想知道是否可以在特定 HTML 注释之后而不是在诸如 <div> 之类的 HTML 元素中插入 HTML 代码。

例如，我想在下面的第一个评论标签之后插入开始标签<div id="OUTER"><div id="INNER">；以及第二个评论标签之后的结束标签</div></div>。有人知道该怎么做吗？

<!-- Insert Opening Tags Below -->


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


<!-- Insert Closing Tags Below-->

提前谢谢你。

埃琳娜

【问题讨论】：

我不认为 cmets 是 DOM 的一部分。
评论可以去任何地方。我不明白这个问题。
刚刚找到：stackoverflow.com/questions/1623734/…
@OfirBaruch 所以你说我不能定位评论标签，因为它们不是 DOM 的一部分，对吗？
评论是为了方便开发者。您当然可以将一个 div 嵌套在另一个 div 中，而不必担心 cmets 的去向。我的大部分文档根本没有 cmets。

标签： jquery html text insert

【解决方案1】：

HTML comment 在 DOM 层次结构中有它自己的对应节点，它的 nodeType 属性是 8。像 Firebug 或 Google Console 这样的 DOM 检查器不会显示它们，但是，您可以通过查看页面的源代码找到它们，如果元素是 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-->

【讨论】：

@@undefined 是的，这基本上就是我最终要做的。非常感谢您的帮助。