요소 추가 후 DOM을 업데이트하는 데 오랜 시간이 걸림

Question

div에 요소를 추가하는 코드가 있습니다. 내 컴퓨터에서 해보니 괜찮습니다. 하지만 휴대 전화로 시도해 보면 Chrome 디버거에서 요소가 '요소'보기에 표시되지만 실제 화면에 표시 되려면 시간이 오래 걸립니다.

내 코드입니다 : 그 같은 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); 
});