JavaScript innerHTML และ innerText: คู่มือเปรียบเทียบและการใช้งาน

คุณต้องรู้วิธีเปลี่ยน text หรือ HTML ที่แสดงบนหน้าเพื่อทำให้เว็บไซต์ interactive นั่นคือที่มาของ attributes innerText และ innerHTML

Attributes ทั้งสองทำให้เปลี่ยน text และ HTML code ของ DOM element ได้ง่าย บทความนี้จะสอนการใช้ innerText และ innerHTML ใน JavaScript

JavaScript innerHTML คืออะไร?

innerHTML property ตั้งค่า HTML contents ของ element บนหน้าเว็บ เป็น property ของ HTML DOM ใช้บ่อยกับ <p> element

การใช้งาน:

document.getElementById("paragraph").innerHTML = "Career Karma!";

โค้ดนี้ตั้งค่า contents ของ <p> id="paragraph" เป็น "Career Karma!" getElementById() ดึง element โดย ID

Browser สร้าง Document Object Model (DOM) เมื่อโหลดหน้า DOM เป็น series ของ objects ที่แสดงบนหน้า DOM ทำให้ไม่ต้องเปลี่ยน HTML code ทุกครั้งที่อยากเปลี่ยน web element ใช้ DOM และ JavaScript เปลี่ยนลักษณะหน้าใน session นั้นได้

JavaScript innerText คืออะไร?

innerText property ตั้งค่า text content ของ element รวมถึง descendants (เช่น <span> ภายใน paragraph)

Syntax คล้าย innerHTML:

document.getElementById("element").innerText = "This is a test.";

ตั้งค่า text value ของ element id="element" เป็น "This is a test."

ตัวอย่างจริง: Flashcard App

สร้าง flashcard web page แสดงคำถามเกี่ยว HTML มีปุ่มกดเพื่อเผยคำตอบ

1. สร้าง HTML (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>HTML Flashcard App</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <div class="flashcard">
    <h2>Does a hyperlink only apply to text?</h2>
    <p>The answer will be revealed when you press "Show answer"</p>
    <button id="showAnswer">Show answer</button>
    <br /><br />
    <div id="showMessage"></div>
  </div>
  <script src="./scripts.js"></script>
</body>
</html>

2. เพิ่ม CSS (styles.css)

.flashcard {
  margin: auto; width: 50%; padding: 50px;
  margin-top: 10%; background-color: lightgreen;
  text-align: center;
}
button {
  border: none; background-color: hotpink;
  padding: 10px; border-radius: 10px;
}

3. JavaScript (scripts.js) - ใช้ innerText และ innerHTML

var answerText = document.querySelector('p');
var button = document.querySelector('button');
var message = document.querySelector('#showMessage');

function showAnswer() {
  answerText.innerText = "No. Hyperlinks can be used on both text and images.";
  message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>";
}

button.addEventListener('click', showAnswer);

เมื่อคลิก "Show answer" text ใน paragraph จะเปลี่ยนเป็นคำตอบ และ message div จะแสดงข้อความสีแดงผ่าน innerHTML ที่ render <span> tag

innerText vs innerHTML: ต่างกันอย่างไร?

• innerText: คืนค่า text แบบ plain text ไม่รวม descendants หรือ spacing
• innerHTML: คืนค่า text รวม descendants และ spacing (HTML tags ทั้งหมด)

ใช้ innerText ต้องการ plain text ใช้ innerHTML ต้องการ HTML tags ทั้งหมด ทั้งสองรองรับ browser สมัยใหม่ครบ

สรุป

innerText และ innerHTML จัดการ HTML DOM innerText คืน text content โดยไม่มี spacing/descendants innerHTML คืน content พร้อม spacing และ descendants

ท้าทายเพิ่มเติม: ลองทำให้คลิกปุ่มครั้งที่ 2 ซ่อนคำตอบ เปลี่ยนข้อความปุ่มเป็น "Hide answer" และเก็บข้อความ "You have revealed the answer" ไว้