เพิ่ม content เข้าไปท้ายสุดภายในเซ็ตด้วย Method append() ใน jQuery

วันนี้จะมาแนะนำ Method อีกตัวใน jQuery นั่นคือ append() การทำงานของมันก็คือจะย้ายอิลิเมนต์ไปยังอิลิเมนต์ที่กำหนดภายในเซ็ตและไปอยู่ท้ายสุดเสมอ มาดูตัวอย่างกัน

เขียน html ขึ้นมาก่อนเหมือนเดิม

<span id="main">

    <a href="#">Link1</a>

    <a href="#">Link2</a>

</span>

<div class="inner">ทดสอบ 1</div>

<div class="inner">ทดสอบ 2</div>

<div class="inner">ทดสอบ 3</div>

<div class="inner">ทดสอบ 4</div>

จากนั้นเขียน jQuery

var appendElement = $("div.inner")[0];

$("#main").append(appendElement);

ลองรันดู output

<span id="main">

    <a href="#">Link1</a>

    <a href="#">Link2</a>

    <div class="inner">ทดสอบ 1</div>

</span>

<div class="inner">ทดสอบ 2</div>

<div class="inner">ทดสอบ 3</div>

<div class="inner">ทดสอบ 4</div>

จากโค้ด $("#main").append($("div.inner")[0]);
จะเห็นว่าเรียวต้องการ move อิลิเมนต์ตัวแรกไปอยู่ท้ายสุดในอิลิเมนต์ที่มี id="main"

บางคนสงสัยว่ามันต่างกับ Method appendTo() ยังไง มันเขียนไม่เหมือนกันค่ะ

$('selector').append('new text');
$('new text').appendTo('selector');

อย่างอื่นไม่ทราบค่ะว่ามันต่างกันยังไง ใครทราบรบกวน Comment บอกด้วยนะคะ