JavaScript innerHTML và innerText: Hướng dẫn thao tác DOM

Bạn cần biết cách thay đổi văn bản hoặc HTML hiển thị trên trang để làm cho trang web tương tác hơn. Đó là lúc thuộc tính innerText và innerHTML của HTML phát huy tác dụng.

Các thuộc tính này giúp dễ dàng thay đổi văn bản và mã HTML của một phần tử DOM. Trong hướng dẫn này, bạn sẽ học cách sử dụng thuộc tính JavaScript innerText và innerHTML.

JavaScript innerHTML là gì?

Thuộc tính JavaScript innerHTML thiết lập nội dung HTML của một phần tử trên trang web. innerHTML là thuộc tính của HTML DOM. Thường dùng để thiết lập và sửa đổi nội dung của phần tử .

Cách sử dụng innerHTML:

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

Dòng code này thiết lập nội dung của phần tử  có id "paragraph" thành "Career Karma!". Phương thức getElementById() truy xuất phần tử theo ID.

Trình duyệt định nghĩa Document Object Model (DOM) khi trang tải xong. DOM là một loạt các đối tượng hiển thị trên trang.

DOM có nghĩa là bạn không cần thay đổi mã HTML mỗi khi muốn thay đổi phần tử web. Bạn có thể dùng DOM và JavaScript để thay đổi cách trang hiển thị trong một phiên cụ thể.

JavaScript innerText là gì?

Thuộc tính JavaScript innerText thiết lập nội dung văn bản của một phần tử. Nó cũng thiết lập nội dung của các phần tử con (descendants). Phần tử con có thể bao gồm thẻ  bên trong đoạn văn.

Cú pháp innerText tương tự innerHTML:

document.getElementById("element").innerText = "Đây là một bài test.";

Đoạn code này thiết lập giá trị văn bản của phần tử có id "element" thành "Đây là một bài test.".

Bạn có thể test các phương thức này bằng cách vào console JavaScript và chọn phần tử để thay đổi:

// Thay đổi nội dung thẻ <p> đầu tiên
document.querySelector('p').innerText = "Nội dung mới";

Sử dụng innerHTML và innerText trong JavaScript

Hãy bắt đầu thay đổi văn bản trên trang web. Ta sẽ tạo một trang web flashcard đơn giản. Trang hiển thị câu hỏi về HTML, có nút bấm khi nhấn sẽ hiển thị đáp án.

Tạo trang web

Bước đầu: tạo file index.html cho front-end:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Flashcard App</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <div class="flashcard">
    <h2>Hyperlink có chỉ áp dụng cho văn bản không?</h2>
    <p>Đáp án sẽ hiện khi bạn nhấn "Hiện đáp án"</p>
    <button id="showAnswer">Hiện đáp án</button>
    <br />
    <br />
    <div id="showMessage"></div>
  </div>
  <script src="./scripts.js"></script>
</body>
</html>

Trang tạo container với ba thành phần: câu hỏi, thông báo cách hiển thị đáp án, nút bấm hiện đáp án.

Giao diện ban đầu:

JavaScript innerHTML và innerText: Hướng dẫn thao tác DOM — Flashcard ban đầu

CSS để trang đẹp hơn

<style>
.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;
}
</style>

Giao diện sau CSS:

Thay đổi văn bản với innerHTML và innerText

Muốn đáp án hiện ra khi nhấn nút. Trước tiên chọn phần tử văn bản và nút để dùng trong JavaScript. Viết code trong file scripts.js:

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

Tạo hàm JavaScript hiển thị đáp án khi nhấn nút:

function showAnswer() {
  answerText.innerText = "Không. Hyperlink có thể dùng cho cả văn bản và hình ảnh.";
}

Tạo event listener lắng nghe click trên nút:

button.addEventListener('click', showAnswer);

Hoàn tất setup flashcard. Khi xem trang và nhấn "Hiện đáp án", văn bản trong đoạn văn thay đổi hiển thị đáp án.

Mở rộng với innerHTML

Giả sử muốn hiển thị thông báo ở dưới flashcard sau khi nhấn nút, thông báo màu đỏ. Dùng innerHTML thêm thẻ HTML :

var message = document.querySelector('#showMessage');
function showAnswer() {
  answerText.innerText = "Không. Hyperlink có thể dùng cho cả văn bản và hình ảnh.";
  message.innerHTML = "<span style='color:red;'>Bạn đã hiện đáp án.</span>";
}

Kết quả chạy code:

Ta đã dùng innerHTML thêm thẻ  HTML vào trang. Thẻ này hiển thị thông báo màu đỏ khi người dùng nhấn nút hiện đáp án.

So sánh innerText vs innerHTML

Cả innerText và innerHTML cho phép truy cập và thay đổi nội dung của thẻ. innerText trả về văn bản thuần túy, không có phần tử con hay khoảng trắng. innerHTML trả về văn bản bao gồm cả phần tử con và khoảng trắng.

Dùng innerText khi muốn làm việc với văn bản thuần túy.
Dùng innerHTML khi muốn làm việc với các thẻ HTML trong chuỗi.

Tóm lại: innerText cho văn bản thuần túy, innerHTML cho HTML trong chuỗi. Cả hai đều được hỗ trợ rộng rãi trong trình duyệt hiện đại.

Kết luận

Thuộc tính innerText và innerHTML thao tác HTML DOM. innerText trả về nội dung văn bản của phần tử không có khoảng trắng hay phần tử con. innerHTML trả về nội dung phần tử bao gồm khoảng trắng và phần tử con.

Thử thách thêm: hãy làm cho code trên ẩn đáp án khi nhấn nút lần thứ hai. Yêu cầu:

Ẩn đáp án khi người dùng nhấn nút
Đổi chữ nút từ "Hiện đáp án" thành "Ẩn đáp án" khi đáp án đang hiển thị
Giữ thông báo "Bạn đã hiện đáp án" sau khi nhấn "Ẩn đáp án"

Nếu tìm thêm tutorial học JavaScript, xem hướng dẫn "best tutorials for JavaScript beginners".