home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เมธอด HTML DOM createElement()

เมธอด HTML DOM createElement() ใช้สำหรับสร้างองค์ประกอบ HTML แบบไดนามิกโดยใช้ JavaScript รับชื่อองค์ประกอบเป็นพารามิเตอร์และสร้างโหนดองค์ประกอบนั้น คุณต้องใช้เมธอด appendChild() เพื่อให้องค์ประกอบที่สร้างใหม่เป็นส่วนหนึ่งของ DOM

ไวยากรณ์

ไวยากรณ์สำหรับเมธอด createElement() ดังนี้ -

document.createElement(nodename)

ตัวอย่าง

ลองดูตัวอย่างสำหรับเมธอด createElement() -

<!DOCTYPE html> <html> <body> <h1>createElement() example</h1> <p>คลิกปุ่มด้านล่างเพื่อสร้างปุ่มเพิ่มเติม</p> <button onclick="createButton()">CREATE</button> <br><br> <script> var i = 0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "BUTTON" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมธอด HTML DOM createElement()

เมื่อคลิกปุ่ม CREATE สามครั้ง หนึ่งคลิกสำหรับหนึ่งปุ่ม -

เมธอด HTML DOM createElement()

ในตัวอย่างข้างต้น -

เราสร้างปุ่ม CREATE ที่จะเรียกใช้เมธอด createButton() เมื่อถูกคลิกโดยผู้ใช้ -

<button onclick="createButton()">CREATE</button>

ฟังก์ชัน createButton() สร้างองค์ประกอบ <button> โดยใช้เมธอด createElement() ของอ็อบเจกต์เอกสาร ใช้ innerHTML เราตั้งข้อความที่จะแสดงบนปุ่ม เราสร้างองค์ประกอบ <br> อีกตัวโดยใช้เมธอด createElement() ของอ็อบเจกต์เอกสาร องค์ประกอบ <button> และ <br> จึงถูกผนวกกับเนื้อหาเอกสารโดยใช้เมธอด appendChild() -

var i = 0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "BUTTON" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); }