เมธอด HTML DOM createElement() ใช้สำหรับสร้างองค์ประกอบ HTML แบบไดนามิกโดยใช้ JavaScript ใช้ชื่อองค์ประกอบเป็นพารามิเตอร์และสร้างโหนดองค์ประกอบนั้น คุณต้องใช้เมธอด appendChild() เพื่อให้องค์ประกอบที่สร้างขึ้นใหม่เป็นส่วนหนึ่งของ DOM
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ createElement() วิธีการ -
document.createElement(nodename)
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับเมธอด createElement() -
<!DOCTYPE html>
<html>
<body>
<h1>createElement() example</h1>
<p>Click the below button to create more buttons</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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้างสามครั้ง คลิกเพียงครั้งเดียวสำหรับปุ่มเดียว -
ในตัวอย่างข้างต้น −
เราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด createButton() เมื่อผู้ใช้คลิก
<button onclick="createButton()">CREATE</button>
ฟังก์ชัน createButton() จะสร้างองค์ประกอบ
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);
} 