Hướng dẫn dùng .innerhtml JavaScript
Trong bài này chúng ta sẽ tìm hiểu thuộc tính innerHTML trong Javascript, đây là một thuộc tính có sẵn trong các node object. Show
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Công dụng của innerHTML là giúp ta lấy nội
dung hoặc thiết lập nội dung cho một node html nào đó. Nếu bạn sử dụng jQuery thì có phương thức 1. Cú pháp innerHTML trong javascriptCú pháp của innerHTML như sau: // lấy nội dung let content = node.innerHTML; // Gán nội dung node.innerHTML = newContent; Trong đó: Bài viết này được đăng tại [free tuts .net]
2. Cách dùng innerHTML trong javascriptVí dụ innerHTML javascript: Giả sử ta có đoạn code HTML như sau.
Để lấy nội dung hoặc gán nội dung vào thẻ này thì ta sẽ sử dụng thuộc tính innerHTML. let node = document.getElementById('node'); // lấy nội dung let content = node.innerHTML; // Gán nội dung node.innerHTML = "Học JS Node tại freetuts.net"; Trên là những thông tin bạn cần biết về thuộc tính innerHTML trong javascript. Thuộc tính innerHTML trong JavaScript có thể được sử dụng để viết html động trên trang web html. Nó được sử dụng chủ yếu trong các trang web để tạo ra html động như form đăng ký, form nhận xét, liên kết, v.v. Ví dụ tạo biểu mẫu html khi người dùng nhấp vào button. Trong ví dụ này, chúng ta tự động viết biểu mẫu html bên trong thẻ div có id="mylocation". Chúng ta xác định vị trí này bằng cách gọi phương
thức document.getElementById(). Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML
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 ElementCú phápinnerHTML 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> Trong Element
Mã mẫuKế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> Trong mã HTML ở trên, sau khi click vào nút thì Element có thuộc tính
innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một ElementCú phápNgoà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 = 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ị let element = document.getElementById('box'); Mã mẫu 1Hã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: html> Trong mã HTML ở trên, sau khi click vào nút thì Element có thuộc tính
Mã mẫu 2Mộ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ẻ / 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 innerHTMLDo 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'); 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.
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: 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ó Tổng kếtTrê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. Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> Bài viết liên quanHã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 javascript
Profile Tá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. |