jquery .html () 대 .append ()

빈 div가 있다고 가정 해 보겠습니다.

<div id='myDiv'></div>

이거 :

$('#myDiv').html("<div id='mySecondDiv'></div>");

다음과 같습니다 :

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

jQuery의 메소드에 HTML 문자열을 전달할 때마다 다음과 같은 상황이 발생합니다.

임시 요소가 만들어지면 x라고합시다. x innerHTML는 전달한 HTML 문자열로 설정됩니다. 그런 다음 jQuery는 생성 된 각 노드 (즉, x 's childNodes)를 새로 작성된 문서 조각으로 전송 한 후 다음에 캐시합니다. 그런 다음 조각을 childNodes새로운 DOM 컬렉션으로 반환합니다 .

jQuery는 여러 브라우저 간 검사 및 기타 다양한 최적화를 수행하므로 실제로는 그보다 훨씬 복잡합니다. 당신은 그냥 통과하면 예는 <div></div>하기 위해 jQuery(), jQuery를 바로 가기을 간단하게 할 것입니다 document.createElement('div').

편집 : jQuery가 수행하는 많은 양의 검사를 보려면 여기 , 여기 및 여기를 살펴보십시오 .

innerHTML이다 일반적으로 당신은 모든 시간을 무엇을 지배하는 것을하지 않지만, 빠른 방법. jQuery의 접근 방식은 간단하지는 않습니다. element.innerHTML = ...앞에서 언급했듯이 확인 및 최적화가 많이 발생합니다.

올바른 기술은 상황에 따라 크게 다릅니다. 많은 수의 동일한 요소를 생성하려면 마지막 반복은 매번 반복 할 때마다 새 jQuery 객체를 생성하는 대규모 루프를 생성하는 것입니다. 예를 들어 jQuery로 100 div를 만드는 가장 빠른 방법 :

jQuery(Array(101).join('<div></div>'));

가독성 및 유지 관리 문제도 고려해야합니다.

이:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... 이보다 유지하기가 훨씬 어렵습니다.

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

그들은 동일하지 않습니다. 첫 번째 는 다른 jQuery 객체를 먼저 만들지 않고 HTML을 대체 합니다. 두 번째는 두 번째 div에 대한 추가 jQuery 래퍼를 만든 다음 첫 번째 div에 추가 합니다.

하나의 jQuery 래퍼 (예 :) :

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

두 개의 jQuery 래퍼 (예 :) :

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

몇 가지 다른 사용 사례가 있습니다. 내용을 바꾸려면 .html의 상당 부분부터 호출하십시오 innerHTML = "...". 그러나 컨텐츠를 추가하려는 경우 추가 $()랩퍼 세트가 필요하지 않습니다.

div나중에 추가 한 내용을 조작해야하는 경우에는 두 개의 래퍼 만 사용하십시오 . 이 경우에도 여전히 하나만 사용해야 할 수도 있습니다.

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

에 의한 경우 .add당신은 의미 .append, 결과는 경우 동일 #myDiv비어 있습니다.

성능이 동일합니까? 몰라

.html(x) 결국 같은 일을 .empty().append(x)

음, DOM 생성 보다 빠른 것을 .html()사용하십시오 ..innerHTML

두 번째 방법으로 다음과 같은 방법으로 동일한 효과를 얻을 수 있습니다.

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

Luca는 html()HTML을 삽입하면 성능이 더 빨라진다 고 언급했습니다 .

그러나 어떤 경우에는 두 번째 옵션을 선택하십시오.

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

.html() 모든 것을 대체합니다.

.append() 끝에 추가됩니다.

주어진 답변 외에 다음과 같은 경우가 있습니다.

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

즉, 파일이 업로드 된 경우 파일 업로드를 자동으로 하나 더 추가하려는 경우, 언급 된 코드가 작동하지 않습니다. 파일이 업로드 된 후 첫 번째 파일 업로드 요소가 다시 작성되므로 업로드 된 파일이 삭제됩니다. . 대신 .append ()를 사용해야합니다.

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

이것은 나에게 일어났다. jquery 버전 : 3.3. 객체 목록을 반복하고 각 객체를 부모 dom 요소의 자식으로 추가하려는 경우 .html과 .append는 매우 다르게 작동합니다. .html마지막 요소 만 부모 요소에 .append추가하고 모든 목록 개체를 부모 요소의 자식으로 추가합니다.