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

Posted 2023-02-21

【中文标题】如何在 Javascript 或 jQuery 中将标签包装在评论中 [重复]

【英文标题】：How To Wrap Tag In Comment In Javascript,Or jQuery [duplicate]

【发布时间】：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 中找到了很多次，但我找不到完美的答案

你可以参考这个网址：***.com/questions/3769964/…（或）你可以使用这个jQuery插件：bennadel.com/blog/…

【参考方案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/