jquery .html () กับ. append ()

ให้บอกว่าฉันมี div ที่ว่างเปล่า:

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

นี่คือ:

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

เหมือนกับ:

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

เมื่อใดก็ตามที่คุณส่งสตริง HTML ไปยังวิธีการใด ๆ ของ jQuery สิ่งนี้จะเกิดขึ้น:

มีการสร้างองค์ประกอบชั่วคราวลองเรียกมันว่า x x's innerHTMLถูกตั้งค่าเป็นสตริงของ HTML ที่คุณส่งผ่าน จากนั้น jQuery จะถ่ายโอนแต่ละโหนดที่ผลิต (นั่นคือ x's childNodes) ไปยังส่วนเอกสารที่สร้างขึ้นใหม่ซึ่งจะทำการแคชในครั้งต่อไป จากนั้นจะส่งคืนแฟรกเมนต์childNodesเป็นคอลเล็กชัน DOM ใหม่

โปรดทราบว่าจริงๆแล้วมันซับซ้อนกว่านั้นมากเนื่องจาก jQuery ทำการตรวจสอบข้ามเบราว์เซอร์และการเพิ่มประสิทธิภาพอื่น ๆ อีกมากมาย เช่นถ้าคุณผ่านเพียง<div></div>เพื่อjQuery(), jQuery document.createElement('div')จะใช้ทางลัดและก็ทำ

แก้ไข : หากต้องการดูปริมาณที่แท้จริงของการตรวจสอบว่า jQuery ดำเนินการได้ดูที่นี่ , ที่นี่และที่นี่

innerHTMLคือโดยทั่วไปวิธีการได้เร็วขึ้นแม้ว่าจะไม่ปล่อยให้ที่ควบคุมสิ่งที่คุณทำอยู่ตลอดเวลา วิธีการของ jQuery นั้นไม่ง่ายเหมือนelement.innerHTML = ...ที่ฉันพูดถึงมีการตรวจสอบและการเพิ่มประสิทธิภาพที่เกิดขึ้นมากมาย

เทคนิคที่ถูกต้องขึ้นอยู่กับสถานการณ์อย่างมาก หากคุณต้องการสร้างองค์ประกอบที่เหมือนกันจำนวนมากสิ่งสุดท้ายที่คุณต้องการคือสร้างลูปขนาดใหญ่สร้างวัตถุ jQuery ใหม่ในทุกการวนซ้ำ เช่นวิธีที่เร็วที่สุดในการสร้าง 100 div ด้วย jQuery:

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

นอกจากนี้ยังมีประเด็นเรื่องความสามารถในการอ่านและการบำรุงรักษาที่คำนึงถึง

นี้:

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

... มีมากยากที่จะรักษากว่านี้:

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

พวกเขาไม่เหมือนกัน อันแรกแทนที่ HTML โดยไม่ต้องสร้างวัตถุ jQuery อื่นก่อน ตัวที่สองสร้างตัวเสริม jQuery เพิ่มเติมสำหรับ div ตัวที่สองจากนั้นต่อท้ายส่วนแรก

หนึ่ง jQuery Wrapper (ต่อตัวอย่าง):

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

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

สอง jQuery Wrappers (ต่อตัวอย่าง):

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

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

คุณมีกรณีการใช้งานที่แตกต่างกันเกิดขึ้น หากคุณต้องการที่จะเปลี่ยนเนื้อหาเป็นสายที่ดีตั้งแต่เทียบเท่าของ.html innerHTML = "..."อย่างไรก็ตามหากคุณต้องการเพิ่มเนื้อหาชุดเสริมพิเศษ$()จะไม่จำเป็น

ใช้สอง wrappers เท่านั้นหากคุณต้องการจัดการเพิ่มในdivภายหลัง แม้ในกรณีนั้นคุณยังอาจต้องใช้เพียงอย่างเดียว:

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

ถ้าโดย.addคุณหมายความว่า.appendผลลัพธ์จะเหมือนกันถ้า#myDivว่างเปล่า

ประสิทธิภาพเดียวกันหรือไม่ ไม่รู้

.html(x) จบลงด้วยการทำเช่นเดียวกับ .empty().append(x)

การ.html()ใช้งาน.innerHTMLนั้นเร็วกว่าการสร้างDOM

คุณสามารถใช้วิธีที่สองเพื่อให้ได้ผลเหมือนกันโดย:

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

Luca กล่าวว่าhtml()เพียงแค่แทรก hte 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 หากคุณวนลูปผ่านรายการวัตถุและต้องการเพิ่มแต่ละวัตถุเป็นลูกขององค์ประกอบพาเรนต์บางส่วนดังนั้น. html และ. ผนวกจะทำงานแตกต่างกันมาก .htmlจะลงเอยด้วยการเพิ่มเฉพาะวัตถุสุดท้ายไปยังองค์ประกอบหลักในขณะที่.appendจะเพิ่มวัตถุรายการทั้งหมดเป็นรายการลูกขององค์ประกอบหลัก