如何在 Javascript 或 jQuery 中将标签包装在评论中 [重复]答案

【问题标题】：How To Wrap Tag In Comment In Javascript,Or jQuery [duplicate]如何在 Javascript 或 jQuery 中将标签包装在评论中 [重复]
【发布时间】：2015-12-26 15:27:50
【问题描述】：

我想包装我的 IN 评论我想在运行时禁用一些标签和脚本，

<div id="some-div">
    <img src="http://placekitten.com/200/300"/>
    <img src="http://placekitten.com/200/150"/>
    <img src="http://placekitten.com/350/330"/>
</div>

$(function ()
{
    $('img').wrap('<!---></--->');
});

但他们不包装他们删除我的标签看演示 http://jsfiddle.net/p8nbpt7o/1/

【问题讨论】：

实际上是个好问题。但它已经得到了回答。
对不起亲爱的，我在 Google 中找到了很多次，但我找不到完美的答案
你可以参考这个网址：stackoverflow.com/questions/3769964/…（或）你可以使用这个jQuery插件：bennadel.com/blog/…

标签： javascript jquery html

【解决方案1】：

您可以使用 document.createComment() 创建评论节点，并使用 replaceChild() 将 img 替换为评论节点

$('img').each(function() {
  parent = this.parentNode;
  parent.replaceChild(document.createComment(this.outerHTML), this);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="some-div">
  <img src="http://placekitten.com/200/300" />
  <img src="http://placekitten.com/200/150" />
  <img src="http://placekitten.com/350/330" />
</div>

或者你可以在 jQuery 中使用 replaceWith()

$('img').each(function() {
  $(this).replaceWith(document.createComment(this.outerHTML));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="some-div">
  <img src="http://placekitten.com/200/300" />
  <img src="http://placekitten.com/200/150" />
  <img src="http://placekitten.com/350/330" />
</div>

【讨论】：

【解决方案2】：

直接在 HTML 中

HTML cmets 以 结尾。

如果您想在 HTML 中同时注释所有标签，您可以这样做：

<!--
<img src="http://placekitten.com/200/300"/>
<img src="http://placekitten.com/200/150"/>
<img src="http://placekitten.com/350/330"/>
-->

如果您想在 HTML 中单独注释所有标签，您可以这样做：

<!--<img src="http://placekitten.com/200/300">-->
<!--<img src="http://placekitten.com/200/150">-->
<!--<img src="http://placekitten.com/350/330">-->

使用 jQuery

如果你想用 jQuery 来做，你可以用 replaceWith 代替 wrap ：

$(function(){
    $('img').replaceWith(function() {
        return "<!--" + this.outerHTML + "-->";
    });
});

结果：

<!--<img src="http://placekitten.com/200/300">-->
<!--<img src="http://placekitten.com/200/150">-->
<!--<img src="http://placekitten.com/350/330">-->

我在 Chrome、Firefox 和 IE11 中尝试过，对我来说效果很好！

小提琴：

http://jsfiddle.net/p8nbpt7o/3/

【讨论】：