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!

• Waleed Khan: I don't think you can append the same div multiple times.
• Felix Kling: Side question: Why are you iterating over a string to append the element?

Answer 1

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

• user1974333: Perfect! But I actually didnt understand the concept! It is working now. Could you please explain me ? thanks
• Felix Kling: 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: Got it. Thanks. I searched a bit a about it.. ot it now. thanks a lot

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

Answer 3

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

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

Answer 4

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.

Answer 5

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