4

この単純なコードを機能させるために、私は髪を伸ばしてきました。指定された 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();
4

2 に答える 2

9

ワーキングデモ

ここでは、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();
于 2013-10-07T15:49:35.607 に答える
0

elms を null に設定しないでください。

var elems = 10;

function generateElems() {

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


generateElems();
于 2013-10-07T15:55:07.537 に答える