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

ออบเจ็กต์ Emphasized (em) ใน HTML DOM

ออบเจ็กต์ Emphasized (em) ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <em> ใช้สำหรับเน้นข้อความ (emphasize) ซึ่งเบราว์เซอร์จะแสดงเป็นตัวเอียง (italic) ตามค่าเริ่มต้น สามารถสร้างและเข้าถึงได้ด้วย createElement() และ getElementById()

ไวยากรณ์ (Syntax)

การสร้างออบเจ็กต์ em:

var emElement = document.createElement("EM");

ตัวอย่าง

ตัวอย่างการสร้างองค์ประกอบ em แบบไดนามิก:

<!DOCTYPE html>
<html>
<body>
<h1>ตัวอย่างออบเจ็กต์ Emphasized</h1>
<p>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ em</p>
<button onclick="createEM()">CREATE</button>
<br><br>
<script>
  function createEM() {
    var em = document.createElement("EM");
    var text = document.createTextNode("HELLO WORLD");
    em.appendChild(text);
    document.body.appendChild(em);
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE"

เมื่อคลิกปุ่ม "CREATE" จะเพิ่มข้อความ "HELLO WORLD" แบบตัวเอียง (italic) เข้าไปในหน้า

คำอธิบายโค้ด

  • สร้างปุ่ม "CREATE" เรียกใช้ createEM() เมื่อคลิก
  • ฟังก์ชัน createEM() สร้าง <em> ด้วย createElement("EM") เก็บใน em
  • สร้างโหนดข้อความ "HELLO WORLD" ด้วย createTextNode()
  • ผูกโหนดข้อความเข้ากับ em ด้วย appendChild()
  • ต่อท้าย em เข้า <body> จะแสดงเป็นตัวเอียงตามค่าเริ่มต้นของเบราว์เซอร์