ออบเจ็กต์โค้ด HTML DOM เชื่อมโยงกับแท็ก HTML 5 ใช้สำหรับทำเครื่องหมายโค้ดโดยล้อมรอบด้วยองค์ประกอบ วัตถุ Code โดยทั่วไปแสดงถึงองค์ประกอบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างโค้ดวัตถุ −
var a = document.createElement("CODE"); ตัวอย่าง
ให้เราดูตัวอย่างสำหรับวัตถุโค้ด HTML DOM -
<!DOCTYPE html>
<html>
<body>
<p>Click the below button to create a CODE element with some text</p>
<button onclick="createCode()">CREATE</button><br><br>
<script>
function createCode() {
var x = document.createElement("CODE");
var t = document.createTextNode("print('HELLO WORLD')");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกสร้าง -
ในตัวอย่างข้างต้น −
เราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด createCode() เมื่อผู้ใช้คลิก -
<button onclick="createCode()">CREATE</button><br><br>
เมธอด createCode() สร้างองค์ประกอบ โดยใช้เมธอด createElement("CODE") บนวัตถุเอกสาร องค์ประกอบที่สร้างขึ้นถูกกำหนดให้กับตัวแปร x จากนั้นโหนดข้อความที่มีข้อความบางส่วนจะถูกสร้างขึ้นโดยใช้เมธอด createTextNode() บนวัตถุเอกสาร โหนดข้อความนี้ถูกผนวกเป็นเด็กในองค์ประกอบ โดยใช้วิธี appendChild() บนตัวแปร x
องค์ประกอบ นี้พร้อมกับโหนดข้อความจะถูกผนวกเป็นลูกของเนื้อหาเอกสารโดยใช้วิธีการ appendChild() -
function createCode() {
var x = document.createElement("CODE");
var t = document.createTextNode("print('HELLO WORLD')");
x.appendChild(t);
document.body.appendChild(x);
} 