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!

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