การใช้งานคำสั่ง 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 id="target">
รับทำเว็บไซต์ ราคาถูก
</div>
<script> $(document).ready(function(){
$("#target").append(" WEB-INDY เว็บอินดี้");    // เพิ่ม "WEB-INDY เว็บอินดี้" ไปใว้หน้าสุด ของ id="target"
});
</script>

 

ผลออกมาจะได้คำว่า "รับทำเว็บไซต์ ราคาถูก WEB-INDY เว็บอินดี้" ประยุคใช้งานได้หลากหลายครับ

 

 

prepend(); = เพิ่มค่า/HTML ไปยั่งส่วนท้ายสุดของ Element ที่กำหนด

ตัวอย่างคำสั่ง

$("#target").prepend("<span>WEB-INDY เว็บอินดี้</span>");

ตัวอย่างการใช้งาน

<div id="target">
รับทำเว็บไซต์ ราคาถูก
</div>
<script> $(document).ready(function(){
$("#target").prepend("WEB-INDY เว็บอินดี้ ");    // เพิ่ม "WEB-INDY เว็บอินดี้" ไปใว้หน้าสุด ของ id="target"
});
</script>

 

ผลออกมาจะได้คำว่า "WEB-INDY เว็บอินดี้ รับทำเว็บไซต์ ราคาถูก" ประยุคใช้งานได้หลากหลายครับ