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

Working DEMO

您正在处理JavaScript变量吊装。删除此行var elems = null;，您的代码应该有效。

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

阅读本文，了解有关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

不要将elms设置为null。

var elems = 10;

function generateElems() {

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


generateElems();

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

2 个答案: