Lợi thế của việc sử dụng innerhtml trong javascript là gì?

Với bài viết này, chúng ta sẽ xem xét một số ví dụ về Làm thế nào để có được giá trị Innerhtml trong các vấn đề Javascript trong lập trình

var myInnerHtml = document.getElementById("forloop").innerHTML;

Không chỉ có một cách để giải quyết vấn đề; . Cách lấy giá trị Innerhtml trong Javascript Trong phần tiếp theo, chúng ta sẽ xem xét các giải pháp tiềm năng còn lại

document.getElementById("Test").innerHTML = "
Test
";

table.innerhtml

Bằng cách kiểm tra các trường hợp thực tế khác nhau, chúng tôi đã chỉ ra cách khắc phục lỗi Cách lấy giá trị Innerhtml trong Javascript

Làm cách nào để nhận các giá trị từ InternalHTML?

Làm thế nào nó hoạt động. Đầu tiên, lấy

phần tử với menu id bằng phương thức getElementById(). Thứ hai, tạo mới
• phần tử và thêm nó vào
  phần tử bằng cách sử dụng các phương thức createElement() và appendChild(). Thứ ba, lấy HTML của
  phần tử sử dụng thuộc tính InternalHTML của
  yếu tố

  InternalHTML hoạt động như thế nào trong Javascript?

  Thuộc tính innerHTML trả về. Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và các thẻ HTML bên trong. Thuộc tính InternalText trả về. Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có khoảng cách văn bản và thẻ ẩn CSS, ngoại trừ

  Khi tôi đang viết một số JS cơ bản để thực hiện thao tác DOM và lắng nghe sự kiện, tôi đã gặp phải một lỗi khiến tôi bối rối. Tôi đã dành thời gian nghiền ngẫm Stack Overflow, tìm kiếm giải pháp vô ích. Để sao chép lỗi, tôi sẽ trình bày một phiên bản đơn giản hóa mã của mình

  Để bắt đầu, tôi có một tệp HTML cơ bản với một div duy nhất trong phần thân

  HTML cơ bản với một div

  Trong tệp JavaScript, tôi đã thêm một số nút vào DOM và tạo một trình xử lý sự kiện trên một nút

  Sử dụng 'innerHTML' để thao tác DOM

  Trong trình duyệt, trang của tôi xuất hiện như mong đợi. Có một hình ảnh, theo sau là một nút và một số văn bản bổ sung mà tôi đã thêm vào DOM

  Nội dung trong trình duyệt web

  Nhìn lướt qua mã, nút có mục đích được xác định rõ ràng. Khi được nhấp vào, chuỗi hello sẽ được xuất ra bảng điều khiển. Tuy nhiên, khi nhấp vào nút, không có gì được in. Tại sao?

  Trước tiên, hãy thử và tìm nơi lỗi được đưa vào mã. Để bắt đầu, tôi sẽ nhận xét dòng div.innerHTML +=

  Bây giờ, khi tôi nhấp vào nút, mọi thứ hoạt động như mong đợi. Khi nhấp vào nút, hello được ghi vào bảng điều khiển

  Nút hoạt động như mong đợi

  Rõ ràng, dòng với innerHTML += đang gây ra vấn đề lớn. Là một lập trình viên JS, việc sử dụng các toán tử như ++ và += dường như là điều tự nhiên. Tuy nhiên, sử dụng toán tử += với

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 sẽ gây ra vấn đề lớn. Dưới đây chúng ta sẽ thảo luận tại sao

  Đang thêm vào div0 Phân tích lại toàn bộ thẻ

  Khi bạn sử dụng toán tử chắp thêm với

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1, Javascript sẽ phân tích lại nội dung của toàn bộ thẻ và tạo lại tất cả các phần tử HTML

  div0 Rất Chậm

  Như một tác dụng phụ tự nhiên của lý do trước đó, việc lặp lại làm cho

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 cực kỳ chậm. Đối với một tài liệu HTML nhỏ có văn bản tĩnh, đây có thể không phải là vấn đề. Tuy nhiên, với các tài liệu lớn hơn, quá trình phân tích lại cực kỳ tốn thời gian và có thể có những tác dụng phụ ngoài ý muốn.

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  6 Xóa trình lắng nghe sự kiện

  Kết luận rõ ràng nhất từ ​​thử nghiệm ngắn gọn của chúng tôi là

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 xóa trình xử lý sự kiện đã được thêm vào DOM trước đó. Vì toàn bộ thẻ (_______3 trong mã của chúng tôi) đang được phân tích lại, trình xử lý sự kiện sẽ bị mất trong quá trình này. Thay vì sử dụng toán tử +=, hãy sử dụng các hàm DOM chẳng hạn như div8

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  6 Trình bày Rủi ro Bảo mật

  Việc sử dụng

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 tạo ra rủi ro bảo mật tiềm ẩn cho trang web của bạn. Người dùng độc hại có thể sử dụng tập lệnh chéo trang (XSS) để thêm tập lệnh phía máy khách độc hại nhằm đánh cắp thông tin người dùng riêng tư được lưu trữ trong cookie phiên

  Bạn có thể đọc tài liệu MDN trên

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1

  Các phương thức tuân thủ W3C có thể dễ dàng thêm các phần tử DOM mới

  Các phương pháp như hello2, hello3, div8 và hello5 cho phép thao tác DOM an toàn mà không gây hậu quả ngoài ý muốn của

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 (và cụ thể hơn là hello7). Trừ khi bạn chỉ đơn giản là đặt văn bản bên trong thẻ HTML, chẳng hạn như hello8 hoặc hello9, hãy tránh xa

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1

  Đối với người mới bắt đầu,

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 có vẻ như là cách dễ dàng và tao nhã nhất để thao tác các phần tử cơ bản trên DOM. Tuy nhiên, khi JS của bạn tham gia nhiều hơn và DOM của bạn tăng kích thước, thì

  document.getElementById("Test").innerHTML = "
  Test
  ";
  

  1 sẽ ảnh hưởng đến hiệu suất và gây ra rủi ro bảo mật

  Lợi thế của InternalHTML trong JavaScript là gì?

  Nó cho phép mã JavaScript điều khiển một trang web đang được hiển thị . Cụ thể hơn, nó đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử. Thuộc tính innerHTML được sử dụng rộng rãi để sửa đổi nội dung của trang web vì đây là cách dễ dàng nhất để sửa đổi DOM.

  Mục đích chính của InternalHTML là gì?

  InnerHTML thuộc tính Phần tử lấy hoặc đặt mã đánh dấu HTML hoặc XML có trong phần tử . Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức insertAdjacentHTML().

  Tại sao bạn không nên sử dụng InternalHTML trong JavaScript?

  Việc sử dụng InternalHTML tạo ra rủi ro bảo mật tiềm ẩn cho trang web của bạn. Người dùng độc hại có thể sử dụng tập lệnh chéo trang (XSS) để thêm tập lệnh phía máy khách độc hại nhằm đánh cắp thông tin người dùng riêng tư được lưu trữ trong cookie phiên

  Khi nào tôi nên sử dụng InternalHTML?

  Như đã đề cập trong hướng dẫn InternalHTML, bạn chỉ nên sử dụng nó khi dữ liệu đến từ một nguồn đáng tin cậy như cơ sở dữ liệu . Nếu bạn đặt nội dung mà bạn không có quyền kiểm soát vào bên trongHTML, mã độc hại có thể được đưa vào và thực thi.