停止附加元素jquery

时间:2013-06-16 17:09:01

标签: jquery

我正在使用jquery,我的问题与apped方法有关

问题很简单

转到此链接

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append

然后点击追加文字。每次点击按钮时继续附加文字我怎么能在一次后停止

这是代码

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>

2 个答案:

答案 0 :(得分:3)

您可以使用one代替click

$("#btn1").one('click',function(){
    $("p").append(" <b>Appended text</b>.");
});

答案 1 :(得分:1)

回应您对dystroy答案的评论,请使用:

$("p").html(" <b>Appended text</b>.");

这将取代段落元素

的html内容

修改以下评论

如果我正确理解你需要做的是使用你想要在追加中移动的对象的选择器。举个例子:

$("p").append(" <b>Appended text</b>.");

将成为

$("p").append( $('#theDivIWantToMove') );