Question

jQuery新手，我想知道如何在一个标记下添加多个<div>标记。实际上，我有这个代码：

   <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>

我想点击clickMe div并在我的 div下添加许多addFrame标记，因此，这个HTML：

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

点击这样的内容后会变成：

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

为了达到这个目的，我尝试了这个：

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

但只添加了一个p。

是否有一些功能（尝试过appendTo（），只添加一个）我不知道能够做到这一点吗？

Answer 1

忽略这个问题的“原因”，你应该能够做到：

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

请参阅：http://jsfiddle.net/Hp8Bx/

Answer 2

我认为你的意思是append()，而不是add()。 append()会在文档中添加新节点，而add()只关注选择其他项目。

以下两行是相同的，它们将选择文档中的#addFrame元素以及所有个节点 - 但实际上不会对它们中的任何节点执行任何操作。

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

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

但是，您的主要问题来自于text()来电已应用于#addFrame，而不是新创建的。

您可以创建并设置如下文字：

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

...然后把整件事放在append()电话中：

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

或者，你可以使用在孩子而不是父母上调用的appendTo()：

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

Answer 3

这对我有用：$('#addFrame).append($('').html('Oh, you clicked !'))

Answer 4

您可以使用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>");
}

将该元素追加到目标的次数。

Here's a jsFiddle that shows a live demo.

添加许多“p”标签

4 个答案: