Question

我们都知道，每当你追加孩子，孩子都会继续追加。我的问题是你如何控制追加孩子只能追加一次，两次，三次或任意数量的指定时间。我将在下面给出一个例子，但我相信你已经知道我在说什么了。 Jquery或Javascript答案表示赞赏。感谢。

Jquery，但可以很容易地成为纯粹的javascript

$( document ).ready(function() {

    $('#myBtn').click(function(){
        $('p:eq(1)').css('background-color', 'yellow');
        var newDiv = document.createElement('div');
        newDiv.id = "newDiv";
        $('#myDiv').append(newDiv);
         newDiv.style.height = "25px";
         newDiv.style.width = "25px";
         newDiv.style.border = "2px solid blue";
    });

});

HTML

<div id="container">
    <div id="myDiv"></div>

    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Third Paragraph</p>

    <input type="button" id="myBtn" value="click me" />
</div>

Answer 1

我切换到jQuery（较小）。这将限制为4个div

JSFiddle：http://jsfiddle.net/TrueBlueAussie/9f353/

$( document ).ready(function() {

    $('#myBtn').click(function(){
        $('p:eq(1)').css('background-color', 'yellow');
        var count = $(".newDiv").length;
        if (count < 4)
        {
            var $newDiv = $('<div>').attr("id", "newDiv" + count).addClass("newDiv").css({ height: "25", width: "25", border: "2px solid blue"}); 
            $('#myDiv').append($newDiv);
        }
    });

});

它使用newDiv类来标识所有添加的项目。
唯一ID为每个div添加newDivnn

实际上并不需要newDiv类，因此您只需计算children下的myDiv即可。这个按钮在达到所需限制时也会隐藏按钮：

JSFiddle：http://jsfiddle.net/9f353/1/

$(document).ready(function () {

    $('#myBtn').click(function () {
        $('p:eq(1)').css('background-color', 'yellow');
        var count = $("#myDiv").children().length;
        if (count == 3) {
            $('#myBtn').hide();
        }
        var $newDiv = $('<div>').attr("id", "newDiv" + count).css({
            height: "25",
            width: "25",
            border: "2px solid blue"
        });
        $('#myDiv').append($newDiv);
    });
});

Answer 2

将您要附加到#myDiv容器的孩子添加一个唯一ID或根本不添加任何ID。然后构造一个for循环来附加x个div

$(function() {
    var xNum = 0;

    $('#myBtn').click(function() {
        for(var i = 0; i < xNum; i++) {
            var aDiv = document.createElement("div");
            aDiv.style.height = aDiv.style.width = "25px";
            aDiv.style.border = "2px solid blue";
            $('#myDiv').append(aDiv);
        }
    });

    $('#myField').change(function() {
        xNum = this.val();
    });
});

其中#myField可以是滑块，输入等

如何在javascript / jquery中控制appendChild行为？

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/9f353/

JSFiddle：http://jsfiddle.net/9f353/1/