要素が追加された後、DOMの更新に長時間を要する

Question

divに要素を追加するコードがあります。私が自分のコンピュータで試してみると、大丈夫です。しかし、私は自分の携帯電話でそれを試してみると、（Chromeデバッガ上の）要素が "Elements"ビューに表示されますが、実際の画面に表示されるまでには時間がかかります。

私のコードは次のようになります。そのようなinnerHTMLアップデートを実行することにより、要素を追加する
が $('.addField').click(function(){ this.parentNode.innerHTML = this.parentNode.innerHTML + '<div class="block"><input class="noBorder name" type="text" placeholder="Name"><input class="noBorder value" type="text" placeholder="Value"><a class="removeField" href="#">X</a></div>'; });

Answer 1

ブラウザは削除して、以前のDOMサブツリーをクリーンアップする、新しいHTMLコンテンツを解析し、全体を構築しなければならないことを意味しますDOMノードの新しいセット

新しい要素を作成し、.appendChild()で追加する方がよいでしょう。

編集 — jQueryの

$('.addField').click(function(){ 
    var block = $("<div/>", { "class": "block" }); 
    block.append($("<input/>", { 
    "class": "noBorder name", 
    placeholder: "Name" 
    })) 
    .append($("<input/>", { 
    "class": "noBorder value", 
    placeholder: "Value" 
    })) 
    .append($("<a/>", { 
    "class": "removeField", 
    "href": "#", 
    "text": "X" 
    })); 
    $(this).parent().append(block); 
});