Question

我想知道我是否可以在特定的HTML评论之后插入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-->

提前谢谢。

埃琳娜

Answer 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操作文档不会改变源视图。此外，您只能将节点添加到文档中，除非您正在操作另一个元素的innerHTML，否则您无法在DOM中放置一些字符串以作为DOM元素进行解析。我建议包装#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-->

在特定HTML注释后插入HTML块

1 个答案: