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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1598
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 11/01/2018 10:51 am

การใช้งาน 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) เปิดดู 167 ครั้ง

จากภาพจะเป็นได้ว่าเมื่อเราคลิกที่ปุ่มแรกข้อความก็ขึ้นตามที่ไฮไลแถวบน แล้วเมื่อเราคลิปปุ่มที่ 2 ข้อความก็จะแทรกเป็น list ต่อๆลงมาตามที่ไฮไลในส่งด้านล่าง

อ้างอิง : https://www.w3schools.com/jquery/html_append.asp
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append_ref
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_styles&stacked=h
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน