javascript: for loop

Question

Why this for loop doesnt work?

javascript:

function create(){
    var newDiv = document.createElement("input");
    var character = "piyush";

    var i =0;

    newDiv.type = "text";
    newDiv.style.background = "red";
    newDiv.style.width ="20px";
    newDiv.style.height ="20px";
    for( i =0; i< character.length ; i++)
    {

    document.getElementById("tryingin").appendChild(newDiv);
    }

 }

html:

<div id="tryingin" onMouseOut="create()" style="width:200px; height:200px; background-color:black"> </div>

now when i alert something in the for loop . i see the alert box 6 times one after the other(as character.length == 6). but why i dont see 6 textboxes appended in the division? And what should be the correct code to append all 6 textboxes all at once.

Help appreciated. Regards!

Side question: Why are you iterating over a string to append the element? — Felix Kling
– Felix Kling, Commented Jan 14, 2013 at 12:34

Felix Kling · Accepted Answer · 2013-01-14 12:31:42Z

3

If an element is already part of the DOM, .appendChild will first detach it from its current parent and attach it to the new parent. From the MDN documentation:

If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

In your case you only have one DOM element. If you want to duplicate the element, you can clone it:

var parent = document.getElementById("tryingin");
for (...) {
    parent.appendChild(newDiv.cloneNode());
}

answered Jan 14, 2013 at 12:31

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

3 Comments

user1974333 Over a year ago

Perfect! But I actually didnt understand the concept! It is working now. Could you please explain me ? thanks

Felix Kling Over a year ago

What exactly did you not understand? A DOM node is a unique entity which can only exist once in the DOM tree. If you append it multiple times, it is moved rather than copied. If you clone the node, you create a copy it. Don't forget to accept the answer that helped you the most by clicking the checkmark next to it.

user1974333 Over a year ago

Got it. Thanks. I searched a bit a about it.. ot it now. thanks a lot

Álvaro González · Accepted Answer · 2013-01-14 12:32:20Z

2

If you append a node into a new location, it gets moved:

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

answered Jan 14, 2013 at 12:32

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Comments

Nemo64 · Accepted Answer · 2013-01-14 12:31:59Z

0

Because you only created one and appended it over and over again. You have to call document.createElement("input") multiple times to create multiple elements.

var character = "piyush";

for(var i =0; i < character.length; i++) {
    var newDiv = document.createElement("input");
    newDiv.type = "text";
    newDiv.style.background = "red";
    newDiv.style.width ="20px";
    newDiv.style.height ="20px";
    document.getElementById("tryingin").appendChild(newDiv);
}

answered Jan 14, 2013 at 12:31

Nemo64

2,6933 gold badges24 silver badges26 bronze badges

1 Comment

Nemo64 Over a year ago

@user1974333 what does not work? I tried it with the js console and there was no problem.

Ghost Answer · Accepted Answer · 2013-01-14 12:40:13Z

0

try this in your script

     var character = "piyush";

    for(var i =0; i < character.length; i++) 
    {
    var div = document.createElement("input");
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "white";
    div.innerHTML = "Hello";

    document.body.appendChild(character );
    }

I hope this will work for you.

answered Jan 14, 2013 at 12:40

Ghost Answer

1,4982 gold badges18 silver badges41 bronze badges

Comments

THE ONLY ONE · Accepted Answer · 2013-01-14 12:50:17Z

0

Please change your code to this function it might help you...

    function create(){
        var character = "piyush";
        var i =0;

        for( i =0; i< character.length ; i++)
        {
            var newDiv = document.createElement("input");
            newDiv.type = "text";
            newDiv.style.background = "red";
            newDiv.style.width ="20px";
            newDiv.style.height ="20px";
            document.getElementById("tryingin").appendChild(newDiv);
        }

 }

edited Jan 14, 2013 at 12:50

answered Jan 14, 2013 at 12:31

THE ONLY ONE

2,1901 gold badge12 silver badges6 bronze badges

Collectives™ on Stack Overflow

javascript: for loop

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Related