2

New to jQuery, I wish to know how to add many <p> tags under one <div> tag. Actually, I have this code : 

   <body>
        <div id="clickMe"> Click here to change text </div>
        <div id="addFrame">
            <p> You didn't click yet. </p>
        </div>
        <script>
            $("document").ready(function(){
                $("#clickMe").click(function(){
                    $("#addFrame").add("p").text("Oh, you clicked !");
                });
            })
        </script>
    </body>

I want to click on the clickMe div and add many <p> tags under my addFrame div, thus, This HTML : 

        <div id="addFrame">
            <p> You didn't click yet. </p>
        </div>

Will become after clicking something like this : 

        <div id="addFrame">
            <p> Oh, you clicked ! </p>
            <p> Oh, you clicked ! </p>
        </div>

In order to achieve that, I tried this : 

          $("document").ready(function(){
                $("#clickMe").click(function(){
                    $("#addFrame").add("p").text("Oh, you clicked !");
                    $("#addFrame").add("p").text("Oh, you clicked !");
                });
            })

But only one p is added.

Is there some function (tried appendTo() as well, adds just one) I am not aware of that's able to accomplish this ?

4

4 回答 4

3

我想你实际上是说append()，不是add()。append()将向文档添加新节点，而add()只关心选择其他项目。

以下两行是相同的，将选择#addFrame元素以及<p>文档中的所有节点 - 但实际上不会对它们中的任何一个做任何事情。

$('#addFrame').add('p')
$('#addFrame, p');

通过使用<p>instead of p，您将创建一个新节点，而不是选择文档中的所有现有段落。不过，我想不出任何你想要这样做的理由add()，因为你只是选择#addFrame节点加上一个新创建的不可见（不在文档中）段落。

但是，您的主要问题来自text()调用被应用于 . 而#addFrame不是新创建的<p>.

您可以<p>像这样创建和设置文本：

$('<p>').text('Oh, you clicked')

...然后把整个事情放在一个append()电话里：

$('#addFrame').append($('<p>').text('Oh, you clicked'));

或者，您可以使用appendTo()which is called on child 而不是 parent：

$('<p>').text('Oh, you clicked').appendTo('#addFrame')
于 2013-07-05T23:47:29.180 回答
3

This worked for me: $('#addFrame).append($('<p>').html('Oh, you clicked !'))

于 2013-07-05T23:36:02.673 回答
3

Ignoring the "why" of this question, you should be able to do:

$("#addFrame").append($("<P>").text("Oh, you clicked !"));

See: http://jsfiddle.net/Hp8Bx/

于 2013-07-05T23:36:41.493 回答
1

您可以只使用 for 循环（当然，在清除“主机”div之后）：

$("#addFrame").html(""); // clears the contents of #addFrame

for(var i = 0; i < number_of_ps_to_insert; ++i) {
  $("#addFrame").append("<p> something </p>");
}

它将该元素多次附加到目标。

这是一个显示现场演示的 jsFiddle。

于 2013-07-05T23:34:36.587 回答