Hướng dẫn innerhtml js

Nội dung chính Show

innerHTML trong JavaScript và cách lấy câu lệnh HTML chứa trong một Element
innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element
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:
innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element
Xem thêm: getElementById trong JavaScript
Xem thêm: getElementById trong JavaScript

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. 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. 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ìnhp>
  <p>Shop mẹ và bép>
div>

Trong Element div này chứa 2 Element

Thành phố 
Ninh Bình
Shop mẹ và bé

0, và chúng sẽ được lấy y nguyên với cách chúng được ghi trong file HTML như sau:

Thành phố 
Ninh Bình
Shop mẹ và bé

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:

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ắmp>
<div id="box">
<p>Thành phố <br>Ninh Bìnhp>
<p>Shop mẹ và bép>
div>

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

<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

Thành phố 
Ninh Bình
Shop mẹ và bé

1 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

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:

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.toàn bộ các Element con cháu của nó sẽ bị xoá đi khỏi DOM.

Ví dụ

let element = document.getElementById('box');
element.innerHTML = "  Đi  Hà Nội  
";

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:

Trong Element div này chứa 2 Element

Thành phố 
Ninh Bình
Shop mẹ và bé

0, và chúng sẽ được lấy y nguyên với cách chúng được ghi trong file HTML như sau:

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ắmp>

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

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

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

Mã mẫu

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

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:

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ắmp>

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

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

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

element.innerHTML =

Thành phố 
Ninh Bình
Shop mẹ và bé

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

let element = document.getElementById('box');
element.innerHTML = '';

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: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.

element.innerHTML =

Thành phố 
Ninh Bình
Shop mẹ và bé

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.

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ắmp>

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

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

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

Ngoài ra trong trường hợp giá trị

Thành phố 
Ninh Bình
Shop mẹ và bé

3 chỉ định chứa các ký tự đặc biệt như tag của ngôn ngữ HTML (ví dụ

Thành phố 
Ninh Bình
Shop mẹ và bé

Thành phố 
Ninh Bình
Shop mẹ và bé

5…) 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.

Xem thêm: getElementById trong JavaScript

innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một ElementinnerHTML 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é.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại Creativecommons và DMCA

programming html innerHTML JS Innerhtml là gì innerHTML jQuery innerHTML w3school innerHTML vs innerText innerHTML reactjs innerText trong JS

Hướng dẫn innerhtml js - innerhtml js

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

Cú pháp

Ví dụ

Mã mẫu

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

Cú pháp

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:

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

Xem thêm: getElementById trong JavaScript

Xem thêm: getElementById trong JavaScript

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội