你能用jquery动态地向代码添加注释吗?

时间:2010-09-22 13:56:37

标签: jquery html

我试过了:

<script>
$(function() {
$('.class').before('<!--');
$('.class').after('-->');
});

</script>

但由于我不知道的原因,它不起作用。

任何人都可以帮助我理解为什么它不起作用以及我该怎么做?谢谢,非常感谢。

9 个答案:

答案 0 :(得分:7)

看起来你正试图让.class的对象消失。请改用.hide()。注释仅在浏览器首次加载页面时进行解析,因此添加注释不会对某些内容进行注释。

您需要了解HTML和DOM之间的区别。 HTML是页面的文本表示,但浏览器在页面加载时将其解析为DOM。 JavaScript适用于DOM,而不适用于HTML。在DOM元素上使用.innerHtml()重新分析HTML。

Here's an example使用innerHtml()隐藏使用HTML评论的元素(但请注意,我从不这样做 - 我只是展示如何做它看起来像什么你试图在你的问题中做到):

HTML:

<h1>hello</h1>

<div>
    <p>wow</p>
    <p>dude</p>
</div>​

JavaScript(+ jQuery):

$(document).ready(function () {
    setTimeout(hideIt, 1000);
});

function hideIt() {
    $('div').html('<!--' + $('div').html() + '-->');
}​

答案 1 :(得分:4)

你在那里混合了两个完全不相关的概念:HTML和DOM。

HTML 是一种描述内容的文本方式,它与代码一样,具有评论内容的方法。 DOM 是浏览器中生成的对象模型。

一旦读取并解析了HTML并创建了DOM,就会丢弃HTML并且不必要。将HTML注释添加到事物中不会改变它们,事实上没有意义(尽管很容易看出你的想法,但是没有错误的想法)。

获得DOM后,隐藏元素而不删除它,请使用hide。要完全删除它,请使用remove

两者的实例:http://jsbin.com/araju

答案 2 :(得分:3)

$("<!--your comment text here -->").insertAfter(selector);

$(selector).after("<!--your comment text here -->");

live demo

答案 3 :(得分:1)

不,你不能像这样添加一个开始和结束的推荐标签。 comment标记是单个标记,它不是单独的起始标记和结束标记。因此,<!---->不是有效的HTML片段,因为它们不包含完整标记。

如果你想在注释中放置一个元素,它就不再是元素,所以要做到这一点,你必须得到元素的HTML代码,在它周围放置注释标记,并用注释替换元素

如果你这样做是为了隐藏元素,你应该只使用hide方法。

答案 4 :(得分:0)

我认为您需要预先添加并按照您的思维方式执行此操作。不确定它是否会让事情消失。

如果你想要一些东西不可见,你最好的选择是使用hide()。

答案 5 :(得分:0)

使用.hide()是实现目标的更好方法。另外值得一提的是注释对象是DOM的一部分,所以理论上你可以使用jQuery来操作它们(或者添加新的)。

答案 6 :(得分:0)

一些选项:

$('.mycurrentclass').remove(); 

$('.mycurrentclass').detach();// see below for possible use

$('.mycurrentclass').css({display:'none'});

$('.mycurrentclass').hide(); 

$('.mycurrentclass').toggleClass('myhiddenclass');

$('.mycurrentclass').addClass("myhiddenclass");

$("myselector").toggle(
  function () {
    $(this).addClass("myhiddenclass");
  },
  function () {
    $(this).removeClass("myhiddenclass");
  }
);

// programtic like you seem to want:(first part puts it back, else detaches it)
var p;
if ( p ) 
{
  p.appendTo("mywheretoappenditselector");
  p = null;
} 
else 
{
  p = $("myselector").detach();
};

答案 7 :(得分:0)

要提供更直接的答案,请使用:

var gonee = $('.myclass');
$('.myclass').replaceWith('<!--' + gonee + '-->');

见我的行动:http://jsfiddle.net/YNe6w/1/

答案 8 :(得分:0)

请使用.html()动态添加html内容

例如:

  $(.dv).click(function(){
 $(".dy").html("abcd");
 });
 <div class=".dy" >
 </div>

尝试并希望它能为你效用