สร้าง element ใหม่ด้วย createElement และ cloneNode

นอกจากเราใส่ tag เข้าไปใน body ตรงๆแล้ว เราสามารถใช้ function ที่มีใน document object ชื่อ createElement ช่วยสร้าง element object ให้เราขึ้นมา แล้วเราค่อยเอาไปเพิ่มใน element ที่แสดงผลอยู่โดยใช้ function appendChild

จากโค้ดตัวอย่างผมทดลองเล่นๆ ไม่ได้ใช้ library หรือ framework อะไรช่วย โดยสร้าง template ด้วย tag div ที่มีโครงสร้าง ui ตามที่เราต้องการแล้วใช้ style display:none เพื่อไม่ใช้มันแสดงผลที่หน้าจอ

เสร็จแล้วลองแยกส่วน ที่จัดการ Event ออกไปไว้ที่ SayController โดยรับค่า element btn กับ lbl เพื่อจัดการให้ถ้ามีการ click ที่ btn แล้วกำหนดค่า textContent ให้กับ lbl

ส่วน SayComponent ทำการจัดการเลือก Template โดยใช้การ cloneNode ของ template เสร็จแล้ว createElement div อันใหม่แล้วดึงพวก button กับ label ใน Template มาใส่ไว้ แล้วเลือก Controller เพื่อกดหนด Event แล้ว return element ใหม่ออกไป

ตอน window load เราก็สร้าง SayComponent สองอันเอาไปใส่ไว้ใน content

นี่คือการทดลองเท่านั้นพอให้เห็นภาพ เวลาไปใช้ของพวก library หรือ framework ที่เป็น component base อย่างเช่น Angular2 , Polymer, หรือ React ก็มีหลักประมาณนี้คือมีส่วน Template, มีส่วน Event Listener, มีส่วน Data Binding

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8">
</head>
<body>
<div id=”content”></div>
<script>
function SayController(btn, lbl) {
btn.addEventListener(“click”, function() {
lbl.textContent = “Hello World”;
});
}
     function SayComponent() {
// Select Template
var template = document.getElementById(“template”).cloneNode(true);
var root = document.createElement(“div”);
var btn = template.querySelector(“button”);
var lbl = template.querySelector(“label”);
root.appendChild(btn);
root.appendChild(lbl);
// Select Controller
new SayController(btn, lbl);
return root;
}
     window.addEventListener(“load”, function() {
var content = document.getElementById(“content”);
content.appendChild(new SayComponent());
content.appendChild(new SayComponent());
});
</script>
 <div id=”template” style=”display:none”>
<button>Say</button>
<label></label>
</div>
</body>
</html>