การใช้งานคำสั่ง append และ prepend
เพื่อเพิ่มHTML ลงไปในElement ที่ต้องการ
คำสั่ง jQuery append และ prepend สำหรับเพิ่ม HTML เข้าไปใน Element ที่กำหนด โดย
append จะเป็นการเพิ่มลงไปในส่วนหน้า prepend คือการเพิ่มลงไปในส่วนท้าย (ภายใต้ Element นั้นๆ)
เช่น Element มีค่าแรกเป็น <div id="target">123456</div> เมื่อใช้คำสั่ง append จะส่งค่า NUM จะได้ดังนี้ <div id="target">NUM123456</div>
สำหรับ prepend จะได้ผลดังนี้
<div id="target">123456NUM</div>
(นี่เป็นการเพิ่มเข้าไปนะครับ แต่หากต้องการให้ไปอยู่ ก่อนหน้า/ต่อจาก อ่านได้ที่นี่ >> การเพิ่มHTML ต่อจาก/ก่อนหน้า Element ที่ต้องการ )
append(); = เพิ่มค่า/HTML ไปยั่งส่วนหน้าสุดของ Element ที่กำหนด
ตัวอย่างคำสั่ง
$("#target").append("<span>WEB-INDY เว็บอินดี้</span>");
ตัวอย่างการใช้งาน
รับทำเว็บไซต์ ราคาถูก
</div>
$("#target").append(" WEB-INDY เว็บอินดี้"); // เพิ่ม "WEB-INDY เว็บอินดี้" ไปใว้หน้าสุด ของ id="target"
});
</script>
ผลออกมาจะได้คำว่า "รับทำเว็บไซต์ ราคาถูก WEB-INDY เว็บอินดี้" ประยุคใช้งานได้หลากหลายครับ
prepend(); = เพิ่มค่า/HTML ไปยั่งส่วนท้ายสุดของ Element ที่กำหนด
ตัวอย่างคำสั่ง
$("#target").prepend("<span>WEB-INDY เว็บอินดี้</span>");
ตัวอย่างการใช้งาน
รับทำเว็บไซต์ ราคาถูก
</div>
$("#target").prepend("WEB-INDY เว็บอินดี้ "); // เพิ่ม "WEB-INDY เว็บอินดี้" ไปใว้หน้าสุด ของ id="target"
});
</script>
ผลออกมาจะได้คำว่า "WEB-INDY เว็บอินดี้ รับทำเว็บไซต์ ราคาถูก" ประยุคใช้งานได้หลากหลายครับ