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


248

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

21
không, cái thứ hai không có id, vì vậy cùng một văn bản sẽ không được xuất ra.
Matt Ellen

.html nhanh hơn nhiều sau khi bạn chạy lần đầu tiên. nó có thể mất thứ hai hoặc lâu hơn khi bạn chạy nó lần đầu tiên.
sukhjit dhot

Câu trả lời:


316

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đây .


innerHTMLnó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
});

5
jQuery (Mảng (101) .join ('<div> </ div>')); <- tại sao 101 thay vì 100?
tacone

2
Chỉ muốn thêm một datapoint. Thực hiện một số thử nghiệm hiệu suất trên một ứng dụng tải một lượng lớn (10K +) <li> vào <ul> và thấy thời gian kết xuất (không tải) tăng từ ~ 12 giây -> 0,25 giây bằng cách chuyển đổi .append ( giantListHTMLAsASingleString) thành .html (giantListHTMLAsASingleString). Nếu bạn đã thực hiện thủ thuật 'tham gia' hoặc xây dựng một chuỗi html lớn trong danh sách của mình, chắc chắn có một sự khác biệt hoàn hảo trong hai phương pháp này.
omniis

9
@tacone Bởi vì "keo" nối được áp dụng giữa các thành phần mảng. 101sẽ có 100 keo được áp dụng, giống như tham gia 3 yếu tố sẽ có 2 keo : EL-glue-EL-glue-EL. Trong ví dụ của James, các phần tử mảng là "trống" vì vậy việc nối N phần tử trống dẫn đến kết quả là N-1 liên tiếp.
Fabrício Matté

5
Đối với những người quan tâm đến một tham chiếu cho cú pháp jquery được sử dụng ở trên và những gì được phép, hãy xem api.jquery.com/jquery/#jQuery-html-attribut .
Thaddeus Albers

1
Có một sự khác biệt lớn ở chỗ nó mất bất kỳ dữ liệu nào được gắn vào các doms.
Adrian Bartholomew

68

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();

Bạn thấy sao? Việc nối chuỗi đã xảy ra lỗi ở đây (trích dẫn không được giải thích). xem bài viết của tôi: P
kizzx2

20

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)


Ngoài ra, cái đầu tiên rõ ràng sẽ có id của mySecondDiv trong khi cái còn lại sẽ không có id trên đó. Và cú pháp sẽ cần phải là .html ("<div id = 'mySecondDiv'> </ div>") bằng cách sử dụng dấu ngoặc kép để có thể sử dụng dấu ngoặc đơn.
ryanulit


7

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

5
Đây là mã jQuery cực kỳ kém hiệu quả (và bị hỏng). Nếu bạn muốn tránh ghép nối, hãy làm điều này: (cũng pxkhông cần lưu ý ):$('<div />', { width: myWidth }).appendTo("#myDiv");
Doug Neiner

3
Làm thế nào là "không hữu ích" này? Người đăng yêu cầu "sự khác biệt" (từ khóa là "vs") vì vậy tôi nói với anh ấy sự khác biệt. Mã này dài dòng nhưng tôi sẽ không nói "không hiệu quả" chỉ vì thực tế đó không phải là một lớp lót. Chúng ta không nên dài dòng khi giải thích mọi thứ với mọi người?
kizzx2

3

.html() sẽ thay thế mọi thứ.

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


2

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

0

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

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.