การใช้ method append() ใน jQuery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้ method append() ใน jQuery

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

การใช้งาน method append() เป็นการแทรกเนื้อหาที่ระบุไว้ในตอนท้ายขององค์ประกอบที่เลือก
เคล็ดลับ: เมื่อต้องการแทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบที่เลือกให้ใช้เมธอด prepend()
รูปแบบการเขียน Syntax

โค้ด: เลือกทั้งหมด

$(selector).append(content,function(index,html))
  • content คือ ต้องระบุเนื้อหาท่ต้องการจะแทรก (สามารถมีแท็ก HTML ได้) ค่าที่เป็นไปได้ ก็จะมีพวก องค์ประกอบของ HTML วัตถุประสงค์ของ jQuery และองค์ประกอบของ DOM
    function(index,html) คือ ระบุฟังก์ชันที่ส่งกลับเนื้อหาที่ต้องการจะแทรก
    • index - แสดงตำแหน่งของ องค์ประกอบใน set นั้น
      Html - ส่งกลับ HTML ปัจจุบันขององค์ประกอบที่เราเลือก
ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<!--link button-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--script method append()-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script button-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>ยินดีต้อนรับ Append!</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>สวัสดี  Append!</li>");
    });
});
</script>
</head>
<body>

<p>ตัวอย่างการใช้งาน method append()</p>


<ol>
  <li>Hello A!</li>
  <li>Hello B!</li>
  <li>Hello C!</li>
</ol>

<button id="btn1" class="btn btn-info">ยินดีต้อนรับ Append!</button>
<button id="btn2" class="btn btn-warning">สวัสดี Append!</button>

</body>
</html>
ผลลัพธ์
yghj.JPG
yghj.JPG (26.75 KiB) Viewed 2393 times
จากภาพจะเป็นได้ว่าเมื่อเราคลิกที่ปุ่มแรกข้อความก็ขึ้นตามที่ไฮไลแถวบน แล้วเมื่อเราคลิปปุ่มที่ 2 ข้อความก็จะแทรกเป็น list ต่อๆลงมาตามที่ไฮไลในส่งด้านล่าง

อ้างอิง : https://www.w3schools.com/jquery/html_append.asp
https://www.w3schools.com/jquery/tryit. ... append_ref
https://www.w3schools.com/bootstrap/try ... &stacked=h
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 72