jQuery append(): คู่มือการใช้งานและตัวอย่างโค้ด

jQuery: บทนำสั้นๆ

jQuery เป็นไลบรารี JavaScript ที่ช่วยให้นักพัฒนาสามารถจัดการ DOM, เขียน event handler, แอนิเมชัน และ AJAX request ได้ด้วยโค้ดเพียงไม่กี่บรรทัด ซึ่งทำได้ด้วย selectors และ methods ที่เป็นเอกลักษณ์ของ jQuery API หนึ่งใน methods นั้นคือ append()

jQuery append() คืออะไร?

เมธอด append() สามารถรับอาร์กิวเมนต์ "content" ได้หนึ่งหรือหลายค่า (ซึ่งอาจเป็น HTML string, text, array, element หรือ jQuery object อีกตัว) และนำไปต่อท้าย (append) เข้าไปที่ทุก element ที่ตรงกับ selector ที่ระบุ การใช้งานทั่วไปรวมถึงการเพิ่มรายการใหม่ท้ายลิสต์ (เช่นรายการ "to do" ใหม่ใน to-do list) หรือแสดงเนื้อหาใหม่เมื่อคลิกปุ่ม

วิธีใช้งาน jQuery append()

จากตัวอย่างการแทรก item ลงใน to-do list เราจะเห็นว่า append() ถูกเรียกบน selector และแทรก content เข้าไปในทุก selection ที่ตรงกัน

HTML พื้นฐานสำหรับ To-Do List

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h2>To Do List</h2>
  <ol class="list1">
    <li>Read Chapters 1 & 2</li>
    <li>Meeting at 3:00pm</li>
    <li>Write about yesterday's reading</li>
  </ol>
</body>
</html>

สำคัญคือต้องรวมที่อยู่ jQuery API ไว้ในแท็ก <script> ภายใน <head> ของหน้า HTML มิฉะนั้นจะไม่สามารถใช้ jQuery ได้

เพิ่มรายการใหม่ท้ายลิสต์

สมมติเราต้องการเพิ่ม "Make dinner plans" ท้ายลิสต์ เราเห็นว่า <ol> มี class เป็น list1 เราสามารถ select element นี้ได้โดยเพิ่ม <script> ท้าย <body>:

<script>
$(document).ready(() => {
  $(".list1").append("<li>Make dinner plans</li>")
})
</script>

ภายใน <script> มีสัญลักษณ์ $ ซึ่งคือ jQuery selectors ที่ทรงพลัง เราสามารถ select element ใดๆ ใน DOM ได้โดยส่ง element, class name หรือ id name เข้าไป ในที่นี้ select class list1 ซึ่งจะเลือก <ol> ทั้งหมด (document) selector จะเลือกหน้าทั้งหมดและเรียก ready() เพื่อรอจนหน้าโหลดเสร็จก่อนจึงรันโค้ดบรรทัดถัดไป

เมื่อหน้าโหลดเสร็จ append() จะแทรก <li> เข้าไปก่อน </ol> ทำให้ "Make dinner plans" ปรากฏท้ายลิสต์

ตัวอย่างจริง: แสดงเนื้อหาเมื่อคลิกปุ่ม

สมมติเรามีปุ่มบนหน้าเว็บและต้องการแสดงเนื้อหาใหม่เมื่อคลิกโดยไม่ต้อง refresh หรือ redirect jQuery ทำได้อย่างมีประสิทธิภาพ

HTML พื้นฐาน

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="content">
    <p>Hello World!</p>
  </div>
  <button id="btn-main">Click Me!</button>
</body>
</html>

เพิ่มเนื้อหาเมื่อคลิกปุ่ม

<script>
$(document).ready(() => {
  $("#btn-main").click(() => {
    $("p").append("<b>Goodbye</b>")
  })
})
</script>

โค้ดจะรอ document โหลดเสร็จ แล้วผูก event click กับปุ่ม id="btn-main" เมื่อคลิก จะ select <p> และ append HTML string <b>Goodbye</b> เข้าไป ผลลัพธ์จะเป็น:

<div class="content">
  <p>Hello World!</p><b>Goodbye</b>
</div>
<button id="btn-main">Click Me!</button>

หากต้องการ append เข้าไปใน <div> แทน ให้เปลี่ยน selector จาก $("p") เป็น $(".content")

สรุป

เราได้เห็นว่า append() ทำงานอย่างไรทั้งแบบ standalone และในบริบทของ callback functions ด้วยการ include jQuery selectors และ methods ใน <script> tag เราสามารถ append content ประเภทต่างๆ ไปยังท้าย element ที่ตรงกับ selector ได้ เมธอด append() เปิดโอกาสให้แสดงเนื้อหาให้ผู้ใช้ในเวลาที่ต้องการโดยไม่ต้อง redirect หรือ refresh