How to Control appendChild behaviour in javascript/jquery?

Question

We all know that whenever you appendChild the Child will keep on appending. My question is how can you control the append child to only append once, twice, three times or any number of specified times. I'll give an example below, but I'm sure you'll already know what I'm talking about. A Jquery or Javascript answer is appreciated. Thanks.

Jquery, but could just as easily be pure 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>

You do realize that this will keep appending divs with the same ID? Also, unless appendChild is in a loop, it only runs one. It's not a recursive function or anything. — Sterling Archer
– Sterling Archer, Commented May 29, 2014 at 16:25
Count the number of elements already appended using .length, and use an if...then statement to conditionally ignore further appends. — Blazemonger
– Blazemonger, Commented May 29, 2014 at 16:30

iCollect.it Ltd · Accepted Answer · 2014-05-29 17:58:37Z

1

I switched to mostly jQuery (smaller). This will limit to 4 divs

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);
        }
    });

});

It uses a newDiv class to identify all the items added.
It uniquely id's each div added with newDivnn

The newDiv class is not really needed, so you can just count the children under myDiv. This one also simply hides the button when it reaches the required limit:

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);
    });
});

edited May 29, 2014 at 17:58

answered May 29, 2014 at 16:44

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dragonore Over a year ago

Thanks, this will work. Interestingly enough, I could never find an answer on the internet to what appears to be a basic question.

user400654 Over a year ago

@dragonore maybe because it's a basic question. you can't limit what .append does, all you can do is not call .append when you don't want to append, or remove elements before appending more if you don't want more than x to exist.

Kodlee Yin · Accepted Answer · 2014-05-29 16:35:19Z

0

Give the child you're appending to the #myDiv container a unique ID or none at all. Construct then a for loop to append x number of divs

$(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();
    });
});

Where #myField could be a slider, input, etc.

edited May 29, 2014 at 16:35

answered May 29, 2014 at 16:27

Kodlee Yin

1,0895 silver badges10 bronze badges

3 Comments

iCollect.it Ltd Over a year ago

I think they want to "limit" the number of divs created (1 per click), not create them all at once :)

Kodlee Yin Over a year ago

The question was ambiguous in how they wanted to limit the creation of divs be it by the button click creating more than one or only one, or the button click being limited to how many it can create maximum.

iCollect.it Ltd Over a year ago

It was not that ambiguous :) "My question is how can you control the append child to only append once, twice, three times or any number of specified times." Not: "append one, two or three"

Collectives™ on Stack Overflow

How to Control appendChild behaviour in javascript/jquery?

2 Answers 2

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

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

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

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

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

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related