HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

innerHTML trong JavaScript và cách lấy hoặc thiết lập câu lệnh HTML chứa trong một Element

22 tháng 6 ,2022

Hướng dẫn cách sử dụng innerHTML trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính innerHTML để lấy cũng như thiết lập các câu lệnh HTML chứa trong một Element chỉ định sau bài học này.

innerHTML trong JavaScript và cách lấy câu lệnh HTML chứa trong một Element

Cú pháp

innerHTML trong JavaScript là một thuộc tính của Element Object, có tác dụng lấy các câu lệnh HTML chứa trong một Element chỉ định.

Cú pháp sử dụng thuộc tính innerHTML trong JavaScript để lấy các câu lệnh HTML như sau:

element.innerHTML

Giá trị trả về của thuộc tính innerHTML là các lệnh HTML, có nội dung y nguyên với cách chúng được ghi trong file HTML.

Ví dụ

Ví dụ cụ thể, hãy xem cách sử dụng innerHTML để lấy các lệnh HMTL có trong Element div ở dưới đây:

<div>
  <p>Thành phố <br>Ninh Bình</p>
  <p>Shop mẹ và bé</p>
</div>

Trong Element div này chứa 2 Element p, và chúng sẽ được lấy y nguyên với cách chúng được ghi trong file HTML như sau:

<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>

Mã mẫu

Kết hợp với phân tích ở ví dụ trên, hãy cùng xem cách dùng innerHTML để lấy câu lệnh HTML chứa trong một Element chỉ định như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng innerHTML </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>

<button onClick="getElements();">Click và lấy câu lệnh HMTL có trong Element</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    console.log('-- start --');
    console.log(element.innerHTML);
    console.log('-- end --');
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì Element có thuộc tính id="box" sẽ được lấy thông qua phương thức getElementById. Sau đó bằng cách dùng thuộc tính innerHTML, chúng ta đã lấy các câu lệnh HTML chứa trong một Element này rồi xuất ra màn hình console như sau:

Xem thêm: getElementById trong JavaScript

innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element

Cú pháp

Ngoài tác dụng lấy nội dung câu lệnh HTML thì chúng ta cũng có thể sử dụng innerHTML trong JavaScript để thay đổi câu lệnh HTML chứa trong một Element chỉ định, với cú pháp như sau:

element.innerHTML = 'value'

Lưu ý, nếu dùng innerHTML để thay đổi câu lệnh HTML chứa trong một Element chỉ định thì ngoài việc câu lệnh HTML chứa trong Element này sẽ được thay đổi, thì toàn bộ các Element con cháu của nó sẽ bị xoá đi khỏi DOM.

Ngoài ra trong trường hợp giá trị value chỉ định chứa các ký tự đặc biệt như tag của ngôn ngữ HTML (ví dụ , <h1>…) thì khác với innerText vốn bỏ qua chức năng của chúng và thêm chúng vào như ký tự bình thường, thì với innerHTML, các ký tự này được thêm vào và thực hiện chức năng vốn có của chúng.

let element = document.getElementById('box');
element.innerHTML = " <p> Đi <strong> Hà Nội </strong> </p>";

Mã mẫu 1

Hãy cùng tìm hiểu cách thay đổi câu lệnh HTML chứa trong một Element chỉ định bằng thuộc tính innerHTML trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng innerHTML </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>

<div id="box">
<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>

<button onClick="getElements();">Click và thay đổi câu lệnh HTML chứa trong Element</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    element.innerHTML = "Đi Hà Nội";
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì Element có thuộc tính id="box" sẽ được lấy thông qua phương thức getElementById. Sau đó khi sử dụng thuộc tính innerHTML để thiết lập một giá trị mới cho Element này thì toàn bộ Element con cháu ban đầu của nó đều bị xoá đi, và thay thế bằng lệnh HTML mới như sau:

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Mã mẫu 2

Một ví dụ khác khi chỉ định giá trị của value chứa các ký tự đặc biệt như thẻ tag của HTML, với cặp thẻ / dùng để ghi dòng văn bản, và cặp thẻ  dùng để in đậm văn bản.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng innerHTML </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>

<div id="box">
<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>

<button onClick="getElements();">Click và thay đổi câu lệnh HTML chứa trong Element</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    element.innerHTML = " <p> Đi <strong> Hà Nội </strong> </p>";
}
</script>
</body>
</html>

Các thẻ HTML này sẽ được thêm vào như là ý nghĩa vốn có, và thực hiện chức năng của chúng.

Khi thẻ script được bao gồm trong câu HTML được thêm bằng innerHTML

Do có thể sử dụng innerHTML để thay đổi nội dung lệnh HMTL có trong một Element, nên chúng ta có thể thêm cả thẻ script vào Element bằng phương pháp này. Tuy nhiên cần lưu ý là các script này tuy được thêm vào bằng innerHTML, nhưng chúng sẽ không được thực thi sau khi thêm vào.

let element = document.getElementById('box');
element.innerHTML = '<script>alert("Hello")</script>';

Bởi vậy, kể cả khi bạn có các mã lệnh nhằm lấy giá trị của người dùng nhập vào để thiết lập innerHTML, thì cũng không phải lo lắng chuyện các giá trị chứa thẻ script mà người dùng tuỳ ý nhập vào có thể bị thực thi dẫn đến bị hack web. Tuy nhiên không phải tất cả các cách thực thi mã script đều bị cấm, vì vậy bạn nên sử dụng tới thuộc tính textContent thay vì innerHTML khi thêm các giá trị không thể xác thực trước vào mã HTML, chẳng hạn như đầu vào của người dùng.

Xem thêm: textContent trong JavaScript

Ví dụ cụ thể, chúng ta dùng innerHTML để thêm câu lệnh HTML chứa thẻ script vào Element như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng innerHTML </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>

<div id="box">
<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>

<button onClick="getElements();">Thay đổi HTML trong Element</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    let s = '<p>Đi Hà Nội</p><script>alert("Mua đồ")<\/script>';
    element.innerHTML = s;
}
</script>
</body>
</html>

Với mã lệnh này, sau khi click nút, câu lệnh HTML mới chứa thẻ script sẽ được thay thế nội dung HTML cũ trong Element có id="box", tuy nhiên thì các script sẽ không tự thực thi mà chỉ được thêm vào mà thôi.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng innerHTML trong JavaScript để lấy và thay đổi câu lệnh HTML của một Element chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.