如何在Javascript或jQuery的注释中包装标签

How To Wrap Tag In Comment In Javascript,Or jQuery

本文关键字：注释 包装 标签 jQuery Javascript      更新时间：2023-09-26

我想结束我的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/

您可以使用 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>

直接在HTML中

HTML注释以<!--开始，以-->结束。

如果你想在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/

相关文章：