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

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:

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

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:

Ví dụ minh hoạ cách dùng innerHTML 



Kế hoạch mua sắm

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


Click và lấy câu lệnh HMTL có trong Element


function getElements[]{
    let element = document.getElementById['box'];
    console.log['-- start --'];
    console.log[element.innerHTML];
    console.log['-- end --'];
}

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:

Creativecommons và DMCABài viết liên quanchildNodes trong JavaScript và cách lấy các Node conattributes trong JavaScript và cách lấy danh sách thuộc tính của ElementcurrentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lýchildren trong JavaScript và cách lấy các Element conCSS selectors trong JavaScriptDocumentFragment trong JavaScript và cách thêm đồng thời nhiều NodefirstChild trong JavaScript và cách lấy Node con đầu tiêngetAttribute trong JavaScript và cách lấy giá trị thuộc tính của ElementHãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam! HOME>> học javascript - lập trình javascript cơ bản>>13. dom trong javascriptBài sauouterHTML trong JavaScript và cách lấy hoặc thay thế toàn bộ lệnh HTML của ElementBài tiếpremoveAttribute trong JavaScript và cách xoá thuộc tính của ElementBài viết mới nhấtTách chuỗi trong PHP [explode, preg_split] tháng 9 17, 2022Cắt chuỗi trong PHP [substr, mb_substr] tháng 9 17, 2022Tách chuỗi thành mảng trong PHP [explode] tháng 9 17, 2022Tìm kiếm chuỗi trong PHP [strpos] tháng 9 17, 2022Đếm số lần xuất hiện của ký tự và chuỗi trong chuỗi PHP [substr_count] tháng 9 17, 2022Chuyển chuỗi thành mảng trong PHP [str_split, mb_str_split] tháng 9 17, 2022Tách từng ký tự trong chuỗi PHP [substr, preg_split] tháng 9 17, 2022Xóa ký tự trong chuỗi PHP tháng 9 15, 2022ProfileTác giả : Kiyoshi [Chis Thanh]Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.