การสร้าง 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.gif (19.45 KiB) Viewed 1113 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/