ล่าสุดการพัฒนาเว็บบทเรียน
 

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

❮ก่อนหน้า ถัดไปบท❯

กับ jQuery มันเป็นเรื่องง่ายที่จะเพิ่มองค์ประกอบใหม่ / เนื้อหา

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

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

  • append() - เนื้อหาแทรกในตอนท้ายขององค์ประกอบที่เลือก
  • prepend() - เนื้อหาแทรกที่จุดเริ่มต้นขององค์ประกอบที่เลือก
  • after() - แทรกเนื้อหาหลังจากองค์ประกอบที่เลือก
  • before() - เนื้อหาแทรกก่อนองค์ประกอบที่เลือก

jQuery append() วิธี

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

ตัวอย่าง

$("p").append("Some appended text.");
ลองตัวเอง»

jQuery prepend() วิธี

jQuery prepend() วิธีการแทรกเนื้อหาที่เป็นจุดเริ่มต้นขององค์ประกอบ HTML ที่เลือก

ตัวอย่าง

$("p").prepend("Some prepended text.");
ลองตัวเอง»

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

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

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

ในตัวอย่างต่อไปนี้เราสร้างองค์ประกอบใหม่ ๆ องค์ประกอบถูกสร้างขึ้นด้วย text / 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.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
ลองตัวเอง»

jQuery after() และ before() วิธีการ

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

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

ตัวอย่าง

$("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>";                    // 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>
}
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»

jQuery HTML อ้างอิง

สำหรับภาพรวมทั้งหมดของทุกวิธี HTML jQuery โปรดไปที่เรา jQuery HTML / CSS อ้างอิง


❮ก่อนหน้า ถัดไปบท❯