before(); และ after กับการเพิ่ม HTML ก่อนหน้า/ต่อจาก Element ที่ต้องการ

        คำสั่ง jQuery before(); และ after(); สำหรับแทรกHTML ก่อนหน้า Element ที่ต้องการ หรือต่อจาก Element ที่ต้องการ เช่น มี <div id="elmt1"></div> อยู่ แต่เราต้องการทำให้มี <div id="elmt2"></div> ใว้ก่อนหน้า/ต่อหลัง โดยใช้ event หรือลูกเล่นใดๆก็ตาม ก็ใช้คำสั่งประมาณนี้ครับ $("#elmt1").before("<div id="elmt2"></div>");  ผลที่ได้จะเป็นแบบนี้ครับ <div id="elmt2"></div><div id="elmt1"></div>

(เป็นการให้มันไปอยู่ ก่อนหน้า/ต่อจาก Element นะครับ หากต้องการให้มันไปอยู่ข้างใน Element อ่านได้ที่นี่ >> jQuery การเพิ่มHTML ลงไปใน Element ที่ต้องการ )


 

before(); = แทรกHTML ใหม่ลงไปก่อนหน้า Element ที่ต้องการ

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

$("#elmt1").before("<div id="elmt2"></div>");

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

<div id="#elmt1">WEB-INDY เว็บอิดี้</div>
<script>
$(document).ready(function(){
$("#elmt1").before("<div id="#elmt2">อยากมีเว็บไซต์ นึกถึงเรา</div>");
});
</script>

 

        ประมาณนี้ครับ จากเดิมจะมีข้อความว้แล้วคือ "WEB-INDY เว็บอินดี้" หลังจากที่ใส่คำสั่งนี้ลงไป ผลที่ออกมา จะเป็นแบบนี้ครับ

อยากมีเว็บไซต์นึกถึงเรา
WEB-INDY เว็บอินดี้

        หลายคนอาจสงใสว่า จะใช้ jQuery ทำไมให้ยุ่งยาก ก็ไปเพิ่มโค๊ดเอาก็ได้หนิ...

แต่จริงๆเวลาใช้คำสั่งลักษณะนี้ จะใช้ร่วมกับ Event ต่างๆ เช่น .click(); / .keyup(); / .change(); และอื่นๆ ตามสถานการณ์


 

after(); = แทรกHTML ใหม่ลงไปต่อจาก Element ที่ต้องการ

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

$("#elmt1").after("<div id="elmt2"></div>");

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

<div id="#elmt1">WEB-INDY เว็บอิดี้</div>
<script>
$(document).ready(function(){
$("#elmt1").after("<div id="#elmt2">อยากมีเว็บไซต์ นึกถึงเรา</div>");
});
</script>

 

        จากตัวอย่าง มีข้อความ "WEB-INDY เว็บอินดี้" อยู่1บรรทัด เมื่อใส่สคริปนี้ลงไป จะแสดงดังนี้

WEB-INDY เว็บอินดี้
อยากมีเว็บไซต์นึกถึงเรา

        หลายคนอาจสงใสว่า จะใช้ jQuery ทำไมให้ยุ่งยาก ก็ไปเพิ่มโค๊ดเอาก็ได้หนิ...

แต่จริงๆเวลาใช้คำสั่งลักษณะนี้ จะใช้ร่วมกับ Event ต่างๆ เช่น .click(); / .keyup(); / .change(); และอื่นๆ ตามสถานการณ์