jquery .html () so với .append ()

Hãy nói rằng tôi có một div trống:

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

Có phải đây là:

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

Giống như:

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

Bất cứ khi nào bạn chuyển một chuỗi HTML cho bất kỳ phương thức nào của jQuery, đây là điều xảy ra:

Một phần tử tạm thời được tạo, hãy gọi nó là x. x's innerHTMLđược đặt thành chuỗi HTML mà bạn đã vượt qua. Sau đó, jQuery sẽ chuyển từng nút được tạo (nghĩa là x childNodes) sang một đoạn tài liệu mới được tạo, sau đó nó sẽ lưu vào bộ đệm cho lần tiếp theo. Sau đó, nó sẽ trả lại đoạn đó childNodesdưới dạng một bộ sưu tập DOM mới.

Lưu ý rằng nó thực sự phức tạp hơn thế nhiều, vì jQuery thực hiện một loạt các kiểm tra trình duyệt chéo và nhiều tối ưu hóa khác. Ví dụ: nếu bạn chuyển chỉ <div></div>đến jQuery(), jQuery sẽ đi một lối tắt và chỉ cần làm document.createElement('div').

EDIT : Để xem số lượng kiểm tra tuyệt vời mà jQuery thực hiện, hãy xem tại đây , đây và đây .

innerHTMLlà nói chung cách tiếp cận nhanh hơn, mặc dù không để điều đó chi phối những gì bạn làm tất cả thời gian. Cách tiếp cận của jQuery không đơn giản như element.innerHTML = ...- như tôi đã đề cập, có một loạt các kiểm tra và tối ưu hóa xảy ra.

Kỹ thuật chính xác phụ thuộc rất nhiều vào tình huống. Nếu bạn muốn tạo một số lượng lớn các phần tử giống hệt nhau, thì điều cuối cùng bạn muốn làm là tạo một vòng lặp lớn, tạo một đối tượng jQuery mới trên mỗi lần lặp. Ví dụ: cách nhanh nhất để tạo 100 div với jQuery:

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

Ngoài ra còn có các vấn đề về khả năng đọc và bảo trì để tính đến.

Điều này:

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

... Khó hơn rất nhiều để duy trì hơn thế này:

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

Chúng không giống nhau. Cái đầu tiên thay thế HTML mà không tạo đối tượng jQuery khác trước. Cái thứ hai tạo ra một trình bao bọc jQuery bổ sung cho div thứ hai, sau đó nối nó với cái đầu tiên.

Một jQuery Wrapper (ví dụ):

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

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

Hai trình bao bọc jQuery (ví dụ):

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

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

Bạn có một vài trường hợp sử dụng khác nhau đang diễn ra. Nếu bạn muốn thay thế nội dung, .htmllà một cuộc gọi tuyệt vời vì nó tương đương với innerHTML = "...". Tuy nhiên, nếu bạn chỉ muốn nối thêm nội dung, bộ $()trình bao bọc thêm là không cần thiết.

Chỉ sử dụng hai hàm bao nếu bạn cần thao tác thêm vào divsau này. Ngay cả trong trường hợp đó, bạn vẫn có thể chỉ cần sử dụng một:

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

nếu theo .addý bạn .append, thì kết quả là như nhau nếu #myDivtrống.

hiệu suất có giống nhau không? không biết

.html(x) cuối cùng làm điều tương tự như .empty().append(x)

Vâng, .html()sử dụng .innerHTMLnhanh hơn so với tạo DOM .

Bạn có thể có được phương pháp thứ hai để đạt được hiệu quả tương tự bằng cách:

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

Luca đã đề cập rằng html()chỉ cần chèn hte HTML sẽ mang lại hiệu suất nhanh hơn.

Tuy nhiên, trong một số trường hợp, bạn sẽ chọn tùy chọn thứ hai, xem xét:

// 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() sẽ thay thế mọi thứ.

.append() sẽ chỉ nối vào cuối.

Khác với các câu trả lời đã cho, trong trường hợp bạn có một cái gì đó như thế này:

<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>

nghĩa là bạn muốn tự động thêm một tệp tải lên nếu bất kỳ tệp nào được tải lên, mã được đề cập sẽ không hoạt động, vì sau khi tệp được tải lên, phần tử tải lên tệp đầu tiên sẽ được tạo lại và do đó tệp được tải lên sẽ bị xóa khỏi nó . Bạn nên sử dụng .append () thay thế:

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

Điều này đã xảy ra với tôi. Phiên bản Jquery: 3.3. Nếu bạn đang lặp qua một danh sách các đối tượng và muốn thêm từng đối tượng là con của một số phần tử cha mẹ, thì .html và .append sẽ hoạt động rất khác nhau. .htmlcuối cùng sẽ chỉ thêm đối tượng cuối cùng vào phần tử cha, trong khi đó .appendsẽ thêm tất cả các đối tượng danh sách là phần tử con của phần tử cha.