การทำงานจะคล้ายๆกับ method insertAfter() นั่นเอง แต่สิ่งที่ต่างกันก็คือ appendTo() นั้นจะเพิ่มอิลิเมนต์เข้าไปในอิลิเมนต์ที่เรากำหนดและจะอยู่ท้ายสุดเสมอส่วน insertAfter นั้นจะไปการเพิ่มอิลิเมนต์ต่อท้ายไปยังอิลิเมนต์ที่เรากำหนด
มาดูัตัวอย่างกันดีกว่ายิ่งพูดยิ่งงง ก่อนเรียวสร้างแท็ก html ขึ้นมาก่อน
<body>
<p></p>
<a href="#">คลิกเพื่อโหลดหน้านี้ใหม่</a>
<span id="spTitle">อธิบายการใช้เมธอด appendTo()</span>
</body>
จากโค้ดจะเห็นว่าแท็ก span อยู่หลังแท็ก a และแท็ก a นั้นอยู่หลังแท็ก p แล้วแท็ก p ก็อยู่ในแท็ก body อีกที (จะพูดให้งงทำไมว่ะเนี่ย -.-*)
ทีนี้มาเขียน jQuery กัน
$(document).ready(function(){
$("<div id='dialog'></div>" ).appendTo("body");
});
ทีนี้เรียวลองรันดูได้ผลลัพธ์ดังนี้
<body>
<p></p>
<a href="#">คลิกเพื่อโหลดหน้านี้ใหม่</a>
<span id="spTitle">อธิบายการใช้เมธอด appendTo()</span>
<div id="dialog"></div>
</body>
จะเห็นว่าแท็ก <div id="dialog"></div> ที่่เราเพิ่มเข้าไปนั้นจะไปอยู่ใน body ซึ่งเรากำหนดไว้แต่จะไปอยู่ต่อท้ายอิลิเมนต์ทุกตัวที่อยู่ใน body ด้วย พูดง่าย ๆ ก็คือเมื่อเราใช้ method appendTo() อิลิเมนต์ที่ถูกเพิ่มเข้าไปนั้นจะไปอยู่หลังสุดนั่นเอง
ทีนี้ถ้าเราจะเพิ่มแท็กเข้าไปยังอิลิเมนต์ที่เราต้องการระบุ id หรือชื่อ class ทำได้ไหม ไม่ยากค่ะเขียนแบบนี้ได้เลย
$("<div id='dialog'></div>" ).appendTo($("#spTitle")); หรือ
$("<div id='dialog'></div>" ).appendTo($(".spTitle"));
ลองรันดูเลย
<body>
<p></p>
<a href="#">คลิกเพื่อโหลดหน้านี้ใหม่</a>
<span id="spTitle">อธิบายการใช้เมธอด appendTo()
<div id="dialog"></div>
</span>
<div id="dialog"></div>
</body>
ง่ายม่ะไม่ต้องมาเขียน DOM ให้วุ่นวาย jQuery เขียนแค่ 1 บรรทัดเท่านั้น อิอิ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น