jQuery เพิ่ม div หรือ element ที่ต้องการด้วย append

jQuery เพิ่ม div หรือ element ที่ต้องการด้วย append บทความนี้สอนเขียนโค้ดเมื่อผู้ใช้งานกดคลิกปุ่ม button ตัว div จะถูกเพิ่มอัตโนมัติไปเรื่อยๆ ตามจำนวนการคลิกโดยใช้คำสั่ง append สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery เพิ่ม div หรือ element ที่ต้องการด้วย append

<style>
    .box {
        border: solid 1px blue;
        padding: 1px;
        margin-bottom: 2px;
        text-align: center;
    }
</style>

<div id="list">
    <div class="box">1</div>
</div>
<input type="button" value="เพิ่ม div" id="btn">

<script>
    let no = 2;
    $("#btn").click( function(){
        $("#list").append("<div class='box'>"+no+"</div>");
        no++;
    });
</script>

jQuery เพิ่ม div หรือ element ที่ต้องการด้วย append เมื่อผู้ใช้งานกดคลิก element div จะถูกเพิ่มพร้อมตัวเลขที่บวกเพิ่มขึ้น มีรายละเอียดดังนี้

1. div ที่จะถูกเพิ่ม จะเพิ่มใน element id เท่ากับ list โดยจะเป็นการเพิ่มต่อท้ายไปเรื่อยๆ แต่ยังอยู่ใน element id list

2. เมื่อผู้ใช้งานกดคลิกปุ่ม โปรแกรมจะเข้าไปทำงานในฟังก์ชัน $("#btn").click โดยเริ่มต้นกำหนดให้ตัวแปร no มีค่าเท่ากับ 2 เป็นตัวนับ div

3. เลือก id = list และใช้คำสั่ง append เพื่อเพิ่มเนื้อหาไว้ภายใน โดยเนื้อหาที่เพิ่มคือ div class = box พร้อมตัวเลขจากตัวแปร no

4. เมื่อเพิ่ม div แล้ว ให้ตัวแปร no บวกค่าเพิ่ม 1 เพื่อรองรับการแสดงผลกับ div ถัดไป