Elements not added to the DOM by the generator function

Question

I am pulling my hair out trying to get this simple code to work. It should display the input fields in this DOM, but it is not. Why not?

var elems = 10;

function generateElems() {

    for (var i = 0; i < elems; i++) {
        document.getElementsByTagName("div")[0].appendChild(document.createElement('input'));
    }

    //Clean up
    var obj = null;
    var elems = null;
}

generateElems();

Answer 1

Working demo

Here you are dealing with moving JavaScript variables. Remove this line var elems = null;and your code should work.

It is considered best practice in JavaScript to declare all variables at the top of a function body.

Read this article for more information on JavaScript hoisting .

, , - . createDocumentFragment , , DOM. .

var elems = 10;

function generateElems() {

    var d=document.createDocumentFragment();

    for (var i = 0; i < elems; i++) {
        d.appendChild(document.createElement('input'));
    }

    document.getElementsByTagName('div')[0].appendChild(d); 

    //Clean up
    //var obj = null;
    //var elems = null;  ----> Commented out this line, it was causing the problem.  
}

generateElems();

Answer 2

.

var elems = 10;

function generateElems() {

    for (var i = 0; i < elems; i++) {
        document.getElementsByTagName("div")[i].appendChild(document.createElement('input'));
    }
}


generateElems();