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

วัตถุ HTML DOM Code

วัตถุ HTML DOM Code เกี่ยวข้องกับแท็ก HTML5 <code> ใช้สำหรับทำเครื่องหมายส่วนของโค้ดโดยการล้อมรอบด้วยองค์ประกอบ <code> วัตถุ Code โดยพื้นฐานแล้วแสดงถึงองค์ประกอบ <code>

ไวยากรณ์

ไวยากรณ์สำหรับ -

การสร้างวัตถุ code -

var a = document.createElement("CODE");

ตัวอย่าง

ลองดูตัวอย่างสำหรับวัตถุ HTML DOM code -

<!DOCTYPE html> <html> <body> <p>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ CODE พร้อมข้อความบางส่วน</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>

ผลลัพธ์

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

วัตถุ HTML DOM Code

เมื่อคลิก CREATE -

วัตถุ HTML DOM Code

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

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

<button onclick="createCode()">CREATE</button><br><br>

เมธอด createCode() สร้างองค์ประกอบ <code> โดยใช้เมธอด createElement("CODE") บนอ็อบเจกต์เอกสาร องค์ประกอบที่สร้างขึ้นถูกกำหนดให้ตัวแปร x จากนั้นโหนดข้อความที่มีข้อความบางส่วนถูกสร้างโดยใช้เมธอด createTextNode() บนอ็อบเจกต์เอกสาร โหนดข้อความนี้ถูกผนวกเป็นลูกขององค์ประกอบ <code> โดยใช้เมธอด appendChild() บนตัวแปร x

องค์ประกอบ <code> พร้อมกับโหนดข้อความจะถูกผนวกเป็นลูกของเนื้อหาเอกสารโดยใช้เมธอด appendChild() -

function createCode() { var x = document.createElement("CODE"); var t = document.createTextNode("print('HELLO WORLD')"); x.appendChild(t); document.body.appendChild(x); }