วิธีที่ต้องการในการสร้างองค์ประกอบใหม่ด้วย jQuery

ฉันมี 2 วิธีที่ฉันสามารถสร้างการ<div>ใช้งานjQueryได้

ทั้ง:

var div = $("<div></div>");
$("#box").append(div);

หรือ:

$("#box").append("<div></div>");

อะไรคือข้อเสียของการใช้วิธีที่สองนอกเหนือจากการใช้งานซ้ำอีกครั้ง?

ตัวเลือกแรกให้ความยืดหยุ่นแก่คุณมากกว่า:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

และแน่นอน.html('*')แทนที่เนื้อหาในขณะที่.append('*')ไม่ แต่ฉันเดาว่านี่ไม่ใช่คำถามของคุณ

แนวทางปฏิบัติที่ดีอีกวิธีหนึ่งคือการเติมตัวแปร jQuery ของคุณด้วย$:
มีเหตุผลใดบ้างที่อยู่เบื้องหลังการใช้ $ กับตัวแปรใน jQuery

การใส่เครื่องหมายคำพูดรอบ ๆ"class"ชื่อคุณสมบัติจะทำให้เข้ากันได้กับเบราว์เซอร์ที่มีความยืดหยุ่นน้อยลง

โดยส่วนตัวฉันคิดว่ามันสำคัญกว่าสำหรับรหัสที่จะอ่านและแก้ไขได้มากกว่านักแสดง ไม่ว่าคุณจะมองดูแบบใดง่ายกว่าและควรเป็นตัวเลือกที่คุณเลือกสำหรับปัจจัยด้านบน คุณสามารถเขียนมันเป็น:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

และวิธีแรกของคุณเป็น:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

แต่เท่าที่อ่านไป; วิธีการ jQuery เป็นที่ชื่นชอบ ทำตามเคล็ดลับ jQuery ที่เป็นประโยชน์นี้บันทึกและแนวทางปฏิบัติที่ดีที่สุด

วิธีแสดงออกมากขึ้น

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

เอกสารอ้างอิง: เอกสาร

ตามเอกสารอย่างเป็นทางการของ jQuery

เพื่อสร้างองค์ประกอบ HTML $("<div/>")หรือ$("<div></div>")เป็นที่ต้องการ

แล้วคุณสามารถใช้อย่างใดอย่างหนึ่งappendTo, append, before, afterและอื่น ๆ ,. เพื่อแทรกองค์ประกอบใหม่ไปยัง DOM

PS: jQuery เวอร์ชัน 1.11.x

ตามเอกสารประกอบสำหรับ3.4เป็นที่ต้องการใช้แอตทริบิวต์กับattr()เมธอด

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

ฉันจะแนะนำตัวเลือกแรกที่คุณสร้างองค์ประกอบโดยใช้ jQuery วิธีที่สองเพียงแค่กำหนดคุณสมบัติ innerHTML ขององค์ประกอบเป็นสตริงซึ่งเกิดขึ้นเป็น HTML และมีข้อผิดพลาดเกิดขึ้นได้ง่ายกว่าและมีความยืดหยุ่นน้อยกว่า

ถ้า#boxว่างเปล่าไม่มีอะไร แต่ถ้าไม่ใช่สิ่งเหล่านี้จะทำสิ่งที่แตกต่างกันมาก อดีตจะเพิ่มเป็นโหนดสุดท้ายของเด็กdiv #boxหลังแทนที่เนื้อหาของ#boxด้วยdivข้อความที่ว่างเปล่าเดียวและทั้งหมด

นอกจากนี้ยังเป็นไปได้ที่จะสร้างองค์ประกอบ div ด้วยวิธีต่อไปนี้:

var my_div = document.createElement('div');

เพิ่มคลาส

my_div.classList.add('col-10');

ยังสามารถดำเนินการappend()และappendChild()