jQuery - เพิ่มองค์ประกอบ
ด้วย jQuery การเพิ่มองค์ประกอบ/เนื้อหาใหม่ทำได้ง่าย
เพิ่มเนื้อหา HTML ใหม่
เราจะดูวิธี jQuery สี่วิธีที่ใช้ในการเพิ่มเนื้อหาใหม่:
append()- แทรกเนื้อหาที่ส่วนท้ายขององค์ประกอบที่เลือกprepend()- แทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบที่เลือกafter()- แทรกเนื้อหาหลังองค์ประกอบที่เลือกbefore()- แทรกเนื้อหาก่อนองค์ประกอบที่เลือก
jQuery ผนวก () วิธีการ
วิธี jQuery append()แทรกเนื้อหาที่ส่วนท้ายขององค์ประกอบ HTML ที่เลือก
ตัวอย่าง
$("p").append("Some appended text.");
jQuery นำหน้า () วิธีการ
วิธีการ jQuery prepend()แทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบ HTML ที่เลือก
ตัวอย่าง
$("p").prepend("Some prepended text.");
เพิ่มองค์ประกอบใหม่หลายรายการด้วย append() และ prepend()
ในทั้งสองตัวอย่างข้างต้น เราได้แทรกเฉพาะข้อความ/HTML บางส่วนที่จุดเริ่มต้น/จุดสิ้นสุดขององค์ประกอบ HTML ที่เลือก
อย่างไรก็ตาม ทั้งสอง วิธี append()และprepend()เมธอดสามารถรับองค์ประกอบใหม่เป็นพารามิเตอร์ได้ไม่จำกัด องค์ประกอบใหม่สามารถสร้างได้ด้วยข้อความ/HTML (เหมือนที่เราทำในตัวอย่างด้านบน) ด้วย jQuery หรือด้วยโค้ด JavaScript และองค์ประกอบ DOM
ในตัวอย่างต่อไปนี้ เราสร้างองค์ประกอบใหม่หลายรายการ องค์ประกอบถูกสร้างขึ้นด้วยข้อความ/HTML, jQuery และ JavaScript/DOM จากนั้นเราผนวกองค์ประกอบใหม่เข้ากับข้อความด้วยappend()วิธี (วิธีนี้ก็ใช้ได้
prepend()เหมือนกัน) :
ตัวอย่าง
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery หลัง () และก่อน () เมธอด
วิธีการ jQuery after()แทรกเนื้อหาหลังจากองค์ประกอบ HTML ที่เลือก
วิธี jQuery before()แทรกเนื้อหาก่อนองค์ประกอบ HTML ที่เลือก
ตัวอย่าง
$("img").after("Some text after");
$("img").before("Some text before");
เพิ่มองค์ประกอบใหม่หลายรายการด้วย after() และ before()
นอกจากนี้ ทั้งสอง วิธี after()และbefore()เมธอดสามารถรับองค์ประกอบใหม่เป็นพารามิเตอร์ได้ไม่จำกัด องค์ประกอบใหม่สามารถสร้างได้ด้วยข้อความ/HTML (เหมือนที่เราทำในตัวอย่างด้านบน) ด้วย jQuery หรือด้วยโค้ด JavaScript และองค์ประกอบ DOM
ในตัวอย่างต่อไปนี้ เราสร้างองค์ประกอบใหม่หลายรายการ องค์ประกอบถูกสร้างขึ้นด้วยข้อความ/HTML, jQuery และ JavaScript/DOM จากนั้นเราแทรกองค์ประกอบใหม่ลงในข้อความด้วยafter()วิธี (วิธีนี้ก็ใช้ได้
before()เหมือนกัน) :
ตัวอย่าง
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
แบบฝึกหัด jQuery
การอ้างอิง jQuery HTML
สำหรับภาพรวมทั้งหมดของเมธอด jQuery HTML โปรดไปที่ jQuery HTML/CSS Referenceของเรา