jQuery การเพิ่มองค์ประกอบ

ด้วย jQuery สามารถเพิ่มองค์ประกอบ/เนื้อหาง่ายๆ

เพิ่มเนื้อหา HTML ใหม่

เราจะเรียนรู้วิธีที่ใช้เพื่อเพิ่มเนื้อหาใหม่ด้วย jQuery สี่วิธี

  • append() - ใส่เนื้อหาที่ปลายองค์ประกอบที่เลือก
  • prepend() - ใส่เนื้อหาที่หน้าต้นองค์ประกอบที่เลือก
  • after() - ใส่เนื้อหาหลังองค์ประกอบที่เลือก
  • before() - ใส่เนื้อหาก่อนองค์ประกอบที่เลือก

วิธี append() ของ jQuery

วิธี append() ของ jQuery ใส่เนื้อหาที่ปลายขององค์ประกอบที่เลือก

ตัวอย่าง

$("p").append("Some appended text.");

ทดลองด้วยตัวเอง

วิธี prepend() ของ jQuery

วิธี prepend() ของ jQuery ใส่เนื้อหาที่หน้าต้นขององค์ประกอบที่เลือก

ตัวอย่าง

$("p").prepend("Some prepended text.");

ทดลองด้วยตัวเอง

เพิ่มองค์ประกอบใหม่ด้วยวิธี append() และ prepend()

ในตัวอย่างที่ข้างต้น，เราเพิ่มข้อความ/HTML ในต้น/ปลายขององค์ประกอบที่เลือก

อย่างไรก็ตาม，วิธี append() และ prepend() สามารถรับองค์ประกอบใหม่ที่ไม่จำกัดจำนวนทาง parameter ผ่าน jQuery ที่สร้าง text/HTML (เช่นตัวอย่างข้างต้น) หรือ JavaScript และ DOM องค์ประกอบ

ในตัวอย่างข้างต้น，เราสร้างองค์ประกอบใหม่หลายชิ้น。องค์ประกอบเหล่านี้สามารถสร้างด้วย text/HTML หรือ jQuery หรือ JavaScript/DOM และแบ่งเพิ่มไปที่ข้อความด้วยวิธี append() มีข้อความใหม่ (prepend() ก็เช่นเดียว):

ตัวอย่าง

function appendText()
{
var txt1="<p>Text.</p>";               // สร้างองค์ประกอบด้วย HTML
var txt2=$("<p></p>").text("Text.");   // สร้างองค์ประกอบใหม่ด้วย jQuery
var txt3=document.createElement("p");  // สร้างองค์ประกอบใหม่ด้วย DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // แบบเพิ่มองค์ประกอบใหม่
{}

ทดลองด้วยตัวเอง

วิธี after() และ before() ของ jQuery

วิธี after() ของ jQuery ใส่เนื้อหาหลังองค์ประกอบที่เลือก

วิธี before() ของ jQuery ใส่เนื้อหาก่อนองค์ประกอบที่เลือก

ตัวอย่าง

$("img").after("Some text after");
$("img").before("Some text before");

ทดลองด้วยตัวเอง

เพิ่มองค์ประกอบใหม่ด้วยวิธี after() และ before()

วิธี after() และ before() สามารถรับองค์ประกอบใหม่จำนวนไม่จำกัดผ่านพารามิเตอร์ องค์ประกอบใหม่สามารถสร้างด้วย text/HTML หรือ jQuery หรือ JavaScript/DOM

ในตัวอย่างด้านล่างนี้ เราสร้างองค์ประกอบใหม่หลายองค์ประกอบ ซึ่งสามารถสร้างด้วย text/HTML หรือ jQuery หรือ JavaScript/DOM แล้วเราใช้วิธี after() ในการใส่องค์ประกอบใหม่ลงในข้อความ (เช่นเดียวกับ before() ด้วย):

ตัวอย่าง

function afterText()
{
var txt1="<b>I </b>";                    // สร้างองค์ประกอบใหม่ด้วย HTML
var txt2=$("<i></i>").text("love ");     // สร้างองค์ประกอบใหม่ด้วย jQuery
var txt3=document.createElement("big");  // สร้างองค์ประกอบใหม่ด้วย DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // ใส่องค์ประกอบใหม่หลัง img
{}

ทดลองด้วยตัวเอง

คู่มืออ้างอิง jQuery HTML

ถ้าต้องการข้อมูลที่เต็มตัวเกี่ยวกับเมธอด jQuery HTML โปรดเข้าถึงคู่มืออ้างอิงต่อไปนี้: