Bạn sẽ cần biết cách thay đổi văn bản hoặc HTML xuất hiện trên trang để làm cho các trang web của bạn tương tác hơn. Đó là nơi mà innerText và innerHTML Thuộc tính HTML có trong.
Các thuộc tính này giúp dễ dàng thay đổi văn bản của phần tử DOM và mã HTML của phần tử đó. Trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript innerText và innerHTML thuộc tính.
JavaScript innerHTML là gì?
Thuộc tính JavaScript innerHTML đặt nội dung HTML của một phần tử trên trang web. InnerHTML là một thuộc tính của HTML DOM. innerHTML thường được sử dụng để đặt và sửa đổi nội dung của phần tử
.
Bạn có thể sử dụng innerHTML như vậy:
document.getElementById (“paragraph”). innerHTML =“Nghiệp báo!”;
Dòng mã này đặt nội dung của phần tử “paragraph”
thành “Nghiệp chướng!” Phương thức getElementById () truy xuất một phần tử theo ID của nó.
Trình duyệt xác định Mô hình Đối tượng Tài liệu (DOM) khi một trang tải. DOM này là một loạt các đối tượng được hiển thị trên trang.
DOM có nghĩa là bạn không phải thay đổi mã HTML mỗi khi bạn muốn thay đổi một phần tử web. Bạn có thể sử dụng DOM và JavaScript để thay đổi cách trang xuất hiện trong một phiên cụ thể.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
JavaScript innerText là gì?
Thuộc tính innerText của JavaScript đặt 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 con cháu của nó. Con cháu có thể bao gồm các thẻ bên trong một đoạn văn.
Cú pháp của innerText tương tự như cú pháp của innerHTML:
document.getElementById (“element”). innerText =“Đây là một bài kiểm tra.”;
Điều này đặt giá trị văn bản của phần tử có id “phần tử” thành “Đây là một bài kiểm tra.”
Bạn có thể kiểm tra các phương pháp này bằng cách vào bảng điều khiển JavaScript của mình và chọn một phần tử để thay đổi:
Điều này thay đổi nội dung của thẻ HTML
đầu tiên trên trang web. Nếu bạn muốn thay thế văn bản, bạn có thể sử dụng innerText thuộc tính:
Điều này thay đổi nội dung của đoạn thứ hai (được biểu thị bằng số 1) trên trang thành "Đây là một bài kiểm tra".
Sử dụng innerHTML và innerText trong JavaScript
Hãy bắt đầu bằng cách thay đổi văn bản trên một trang web. Chúng tôi sẽ tạo một trang web flashcard đơn giản. Trang web này sẽ hiển thị một câu hỏi về HTML. Nó sẽ có một nút, khi được nhấp vào, sẽ hiển thị câu trả lời cho câu hỏi về HTML.
Tạo trang web
Bước đầu tiên của chúng tôi là tạo tệp index.html cho giao diện người dùng của chúng tôi:
<!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> Trang này tạo một vùng chứa với ba thành phần. Đầu tiên, chúng tôi có câu hỏi mà chúng tôi đang hỏi người dùng. Chúng tôi có thông điệp về cách tiết lộ câu trả lời. Trang của chúng tôi kết thúc với một nút để hiển thị câu trả lời.
Mã của chúng tôi trả về nội dung văn bản của các phần tử của chúng tôi:
Chúng tôi sẽ áp dụng một số kiểu CSS trong tệp styles.css để làm cho trang của chúng tôi đẹ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>
Bây giờ chúng ta hãy xem trang web của chúng tôi:
Trang web của chúng tôi hiển thị thứ gì đó trông giống thẻ flash hơn. Chúng tôi đã tạo kiểu cho nút của mình.
Thay đổi văn bản bằng JavaScript innerHTML và innerText
Chúng tôi muốn câu trả lời cho câu hỏi được tiết lộ khi nút được nhấp. Đầu tiên, chúng tôi sẽ chọn các phần tử văn bản và nút mà chúng tôi sẽ sử dụng trong mã JavaScript của mình. Chúng tôi sẽ viết tất cả mã này trong tệp scripts.js của chúng tôi:
var answerText = document.querySelector('p');
var button = document.querySelector('button'); Tiếp theo, chúng ta sẽ tạo một hàm JavaScript. Chức năng này tiết lộ câu trả lời cho câu hỏi của chúng tôi khi nút được nhấp vào:
function showAnswer() {
answerText.innerText = "No. Hyperlinks can be used on both text and images.";
} Để kích hoạt chức năng của chúng tôi khi nhấn nút, chúng tôi sẽ tạo một trình nghe sự kiện đơn giản. Người nghe này lắng nghe khi nhấp vào nút của chúng tôi:
button.addEventListener('click', showAnswer); Chúng tôi đã hoàn thành việc thiết lập ứng dụng thẻ flash của mình. Nếu chúng tôi xem trang web của mình và nhấp vào nút “Hiển thị câu trả lời”, văn bản trong đoạn văn của chúng tôi sẽ được thay đổi để hiển thị câu trả lời:
Chúng tôi có thể thêm nhiều chức năng hơn cho ứng dụng này bằng JavaScript innerHTML . Giả sử chúng ta muốn một thông báo được hiển thị ở dưới cùng của thẻ flash sau khi nút được nhấp. Thông báo này sẽ xuất hiện bằng màu đỏ. Chúng tôi có thể tạo thông báo này bằng mã sau:
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>";
} Hãy thử chạy mã của chúng tôi với showAnswer () đã sửa đổi và bộ chọn truy vấn mới mà chúng tôi đã viết:
Chúng tôi đã sử dụng innerHTML để thêm thẻ HTML vào trang web của chúng tôi. Thẻ này hiển thị thông báo có màu đỏ khi người dùng nhấn vào nút hiển thị câu trả lời.
JavaScript innerText so với innerHTML
Cả thuộc tính innerText và innerHTML đều cho phép bạn truy cập và thay đổi nội dung của thẻ. innerText trả về văn bản mà không có bất kỳ con trỏ hoặc khoảng cách nào. innerHTML trả về văn bản bao gồm bất kỳ phần tử con và khoảng cách nào.
Bạn sẽ sử dụng innerText nếu bạn muốn xem nội dung của một phần tử ở dạng văn bản thuần túy. Sử dụng innerHTML thích hợp hơn nếu bạn muốn xem tất cả các thẻ HTML xuất hiện trong một chuỗi.
Tóm lại, innerText cho phép bạn làm việc với văn bản thuần túy trong khi innerHTML cho phép bạn làm việc với HTML trong một chuỗi.
Cả innerText và innerHTML đều được hỗ trợ rộng rãi trong các trình duyệt hiện đại.
Kết luận
InternalText và innerHTML thuộc tính thao tác với HTML DOM. innerText sửa lại nội dung văn bản của một phần tử mà không có khoảng cách hoặc con trỏ. innerHTML trả về nội dung của một phần tử và bất kỳ khoảng cách nào cũng như phần tử con.
Là một thử thách bổ sung, hãy xem liệu bạn có thể làm cho mã của chúng tôi ở trên ẩn câu trả lời khi nút được nhấp lần thứ hai hay không. Mã của bạn phải:
- Ẩn câu trả lời khi người dùng nhấp vào nút
- Thay đổi nội dung của nút từ “Hiển thị câu trả lời” thành “Ẩn câu trả lời” khi câu trả lời đang hiển thị.
- Giữ thông báo “Bạn đã tiết lộ câu trả lời” sau khi người dùng nhấn “Ẩn câu trả lời”.
Nếu bạn đang tìm kiếm thêm các hướng dẫn sẽ giúp bạn học JavaScript, hãy xem các hướng dẫn tốt nhất của chúng tôi dành cho người mới bắt đầu sử dụng JavaScript.