元素未通过生成器函数添加到DOM

Question

我一直在试着让这个简单的代码工作.它应该在给定的DOM中呈现输入字段,但它不会.为什么不？

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

工作演示

您正在处理JavaScript变量提升.删除此行var elems = null;,您的代码应该工作.

在JavaScript中最好的做法是在函数体的顶部声明所有变量.

阅读本文以获取有关JavaScript 提升的更多信息.

在我们讨论最佳实践时,值得注意的是,在循环中追加元素对于性能来说是个坏主意.您应该使用它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();