การสร้าง element และการ append ของ jquery

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

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

ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

การสร้าง element และการ append ของ jquery

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

การสร้าง element และการ append ของ jquery นั้นเป็นการสร้าง element ขึ้นมาด้วยตัวของ jquery ซึ่งเป็น eleemnt ที่เรานั้นอยากจะสร้างขึ้นมาด้วยโค้ดของ javascript หรือ jquery เพื่อให้เราสามารถใช้งานด้านอื่ๆนเช่นการกดปุ่มเพื่อให้สร้าง element ขึ้นมา ซึ่งมันจะแตกต่างกับการสร้างด้วย HTML ตรงที่การที่เราสร้าง element ขึ้นมาด้วย HTML element นั้นเมื่อเข้าหน้าเว็บแล้ว element จะถูกสร้างขึ้นมาเลยตอนที่เราเข้าหน้าเว็บซึ่งบางครั้งเรานั้นไม่หมากให้ element ของเรานั้นถูกสร้างขึ้นมาเลยที่หน้าเว็บไซต์ ผมจึงมานำเสนอวิธีการสร้าง element ขึ้นมาด้วยตัวของ Jquery

โดยในตอนเริ่มต้นครับการที่เราจะเอาตัว Jquery มาใช้งานได้เราต้องทำการ import ไฟร์ jquery เข้ามาก่อนครับโดยเราจะเรียกไฟร์มาที่ header

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
ต่อจากนั้นเราไม่จำเป็นต้องสร้างอะไรเพิ่มเลยครับผมจะสร้างมาแค่ปุ่ม 1 ปุ่มครับ ซึ่งผมจะ function ให้เมื่อเรากดปุ่มนั้นจะทำการสร้าง element นั้นขึ้นมาด้วยตัว jquery เท่านั้นครับโดยโค้ดทั้งหมดก็จะมีดังนี้ครับ

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

<input type="button" id="add" value="add">
<div id="hello"></div>
<script>
        $("#add").click(function() {
            let boxA = $("<div>", {class: 'box'});
            $("#hello").append(boxA);
            })
    </script>
โดยจะเริ่มต้นจากการสร้าง element เปล่าๆขึ้นมา 1 ตัวครับโดยผมจะสร้าง element ที่มีไอดีว่า hello และก็ปุ่ม add อีก 1 ปุ่มครับจากนั้นผมจะมาเขียน js โดยจะเป็นการดัก Onclick ลงไปในปุ่ม add ครับ เมื่อปุ่ม Add ถูกกดก็จะทำการสร้าง element ที่ใส่ class box เอาไว้ครับซึ่งก็จะเห็นได้จากในโค้ดครับการนั้นก็จะทำการ append ออกมาที่ตัว element id hello ที่เราทำการสร้างเอาไว้ซึ่งจะเป็น parent ของตัวที่เราทำการสร้างขึ้นมาครับ ซึ่งถ้าหากเอาโค้ดนี้ไปใช้หลังจากกดปุ่มแล้วอาจจะยังไม่เห็นอะไรเกิดขึ้นเนื่องจากว่าเรายังไม่ได้ใส่ตัว css ลงไปใน element ที่เราสร้างครับซึ่งผมจะให้เรียกผ่าน class ดังนี้ครับ

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

.box{
            width: 200px;
            height: 200px;
            background-color: green;
        }
หลังจากที่เรา set up ทั้งหมดมาเรามาดูที่ผลลัพธ์กันดีกว่าครับว่าเป็นอย่างไร
ผลลัพธ์ของการสร้าง element ด้วย jquery
ผลลัพธ์ของการสร้าง element ด้วย jquery
ผลลัพธ์ของการสร้าง element ด้วย jquery.gif (19.45 KiB) Viewed 1065 times
ซึ่งจากที่เห็นนั้นจะเป็นการสร้าง element ด้วย jquery ซึ่งสิ่งสำคัญเลยก็คือเราจะต้องมีการสร้าง element เปล่าๆเอาไว้ก่อน 1 อันครับ เพื่อที่จะเป็นตัว selector และบอกว่าเราจะไปสร้าง element ที่อยู่ตรงส่วนไหนของหน้าเว็บนั้น ซึ่งถ้าเราไม่ทำก็จะ append element ออกมาไม่ได้ครับถ้าหากสงสัยว่าวิธีนี้นั้นดีอย่างไร ดีกว่าตรงที่โค้ดเรานั้นจะสั้นครับสะอาดตา และเราสามารถ set ได้ว่าจะให้ element ของเรานั้นถูกสร้างขึ้นมาใน action ไหนของหน้าเว็บเช่นผมตั้งให้เมื่อกดปุ่มก็จะสร้าง element ขึ้นมาเป็นต้นครับ ซึ่งของ javascript ก็ทำได้เหมือนกันครับแต่ว่าโค้ดนั้นจะยาวกว่านิดหน่อยแต่ก็ใช้งานได้เหมือนกันครับผม

อ้างอิง
https://www.w3schools.com/jquery/jquery_dom_add.asp
https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent
https://api.jquery.com/add/
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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