javascript - 生成器函数未将元素添加到 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，然后将其转储到 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();