jQuery .html() vs.append()

jQuery .html() vs.append()

내게 빈 디브가 있다고 치자:

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

이 항목:

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

다음과 동일:

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

HTML 문자열을 jQuery의 메서드에 전달할 때마다 다음과 같이 수행됩니다.

의 x.x의 x.x의 x.x의 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);

몇 가지 다른 사용 사례가 진행되고 있습니다. 내을바싶다면고꾸용,▁the면▁if,싶다▁content..html와 동등하기 때문에 큰 도움이 됩니다.innerHTML = "..." 만약 내용을 , 의 그나내추면추가로려하가러용.$()래퍼 세트가 필요하지 않습니다.

추가된 래퍼를 조작해야 하는 경우에만 두 개의 래퍼를 사용합니다.div나중에이 경우에도 다음 중 하나만 사용하면 됩니다.

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

그렇다면.add그러니까 당신 말은.append그렇다면 결과는 동일합니다.#myDiv비어 있습니다.

성능이 동일합니까?모릅니다.

.html(x)결국과 같은 일을 하게 됩니다..empty().append(x)

음..html()사용하다.innerHTMLDOM 생성보다 빠른 속도입니다.

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

.append()마지막에 추가할 것입니다.

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

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

루카가 언급한 것은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);

주어진 답변 이외에 다음과 같은 내용이 있는 경우:

<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 version : 3.3. 만약 당신이 객체 목록을 반복하고 있고 각 객체를 어떤 부모 요소의 자식으로 추가하고 싶다면, .html과 .append는 매우 다르게 행동할 것입니다. .html마지막 개체만 부모 요소에 추가하게 되는 반면,.append모든 목록 개체를 부모 요소의 자식으로 추가합니다.

언급URL : https://stackoverflow.com/questions/3015335/jquery-html-vs-append