Tác dụng của việc sử dụng innerhtml là gì?

Chặn kiểm tra trong trình chỉnh sửa

1. Định vị dấu mũ tại dòng được đánh dấu và nhấn Alt+Enter hoặc nhấp

2. Nhấp vào mũi tên bên cạnh kiểm tra mà bạn muốn chặn và chọn hành động chặn cần thiết

   Ví dụ

   Nhận nội dung HTML của một phần tử với id="myP"

   hãy để html = tài liệu. getElementById("myP"). bên trongHTML;

   Tự mình thử »

   Thay đổi nội dung HTML của một phần tử với id="demo"

   tài liệu. getElementById("bản trình diễn"). innerHTML = "Tôi đã thay đổi. “;

   Tự mình thử »

   Lấy nội dung HTML của một

   phần tử có id="myList"

   hãy để html = tài liệu. getElementById("myList"). bên trongHTML;

   Tự mình thử »

   Xóa nội dung HTML của một

   phần tử có id="demo"

   Tự mình thử »

   Thêm ví dụ bên dưới

   ---

   Định nghĩa và cách sử dụng

   Thuộc tính innerHTML đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử

   Sự khác biệt giữainnerHTML, văn bản bên trong và nội dung văn bản

   Xem bên dưới

   ---

   cú pháp

   Trả về thuộc tính InternalHTML

   Đặt thuộc tính InternalHTML

   Giá trị tài sản

   Thuộc tínhMô tảStringNội dung HTML

   Giá trị trả về

   TypeDescriptionStringNội dung HTML của phần tử

   ---

   ---

   Thêm ví dụ

   Ví dụ

   Thay đổi nội dung HTML của hai phần tử

   let text = "Xin chào Dolly. ";
   tài liệu. getElementById("myP"). innerHTML = văn bản;
   tài liệu. getElementById("myDIV"). InternalHTML = văn bản;

   Tự mình thử »

   Ví dụ

   Lặp lại nội dung HTML của một phần tử

   thành phần. phần tử bên trongHTML +=. bên trongHTML;

   Tự mình thử »

   Ví dụ

   Thay đổi nội dung HTML và URL của một liên kết

   . innerHTML = "W3Schools";
   phần tử. href = "https. //www. w3schools. com";

   Tự mình thử »

   ---

   Sự khác biệt giữainnerHTML, văn bản bên trong và nội dung văn bản

   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à 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ó thẻ và khoảng cách văn bản ẩn CSS, ngoại trừ

   Nó được sử dụng chủ yếu trong các trang web để tạo html động như biểu mẫu đăng ký, biểu mẫu nhận xét, liên kết, v.v.

   Ví dụ về thuộc tính InternalHTML

   Trong ví dụ này, chúng ta sẽ tạo biểu mẫu html khi người dùng nhấp vào nút

   Trong ví dụ này, chúng tôi đang viết động biểu mẫu html bên trong tên div có id mylocation. Chúng tôi đang xác định vị trí này bằng cách gọi tài liệu. phương thức getElementById()

   Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu sự khác biệt giữa innerHTML và

   let div = document.querySelector('.container');
   
   let p = document.createElement('p');
   p.textContent = 'JS DOM';
   div.appendChild(p);
   Code language: JavaScript (javascript)

   1 khi tạo các phần tử mới trong cây DOM

   #1) createElement hiệu quả hơn

   Giả sử rằng bạn có một phần tử

   let div = document.querySelector('.container');
   
   let p = document.createElement('p');
   p.textContent = 'JS DOM';
   div.appendChild(p);
   Code language: JavaScript (javascript)

   6 với bộ chứa lớp

   <div class="container">div>
   Code language: HTML, XML (xml)

   Bạn có thể tạo các phần tử mới cho phần tử

   let div = document.querySelector('.container');
   
   let p = document.createElement('p');
   p.textContent = 'JS DOM';
   div.appendChild(p);
   Code language: JavaScript (javascript)

   6 bằng cách tạo một phần tử và nối thêm phần tử đó

   let div = document.querySelector('.container');
   
   let p = document.createElement('p');
   p.textContent = 'JS DOM';
   div.appendChild(p);
   Code language: JavaScript (javascript)

   Bạn cũng có thể thao tác trực tiếp với HTML của một phần tử bằng cách sử dụng innerHTML như thế này

   let div = document.querySelector('.container');
   div.innerHTML += '
   JS DOM
   ';
   Code language: JavaScript (javascript)

   Sử dụng innerHTML gọn gàng và ngắn gọn hơn khi bạn muốn thêm thuộc tính cho phần tử

   let div = document.querySelector('.container');
   div.innerHTML += '
   JS DOM
   ';
   Code language: JavaScript (javascript)

   Tuy nhiên, việc sử dụng innerHTML khiến trình duyệt web phân tích lại và tạo lại tất cả các nút DOM bên trong phần tử div. Do đó, nó kém hiệu quả hơn so với việc tạo một phần tử mới và nối thêm vào div. Nói cách khác, việc tạo một phần tử mới và gắn nó vào cây DOM mang lại hiệu suất tốt hơn so với innerHTML

   #2) createElement an toàn hơn

   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

   #3) Sử dụng DocumentFragment để soạn DOM Nodes

   Giả sử rằng bạn có một danh sách các phần tử và bạn cần trong mỗi lần lặp lại

   let div = document.querySelector('.container');
   
   for (let i = 0; i < 1000; i++) {
      let p = document.createElement('p');
      p.textContent = `Paragraph ${i}`;
      div.appendChild(p);
   }
   Code language: JavaScript (javascript)

   Mã này dẫn đến việc tính toán lại các kiểu, vẽ và bố cục sau mỗi lần lặp lại. Điều này không hiệu quả lắm

   Để khắc phục điều này, bạn thường sử dụng một

   let div = document.querySelector('.container');
   
   let p = document.createElement('p');
   p.textContent = 'JS DOM';
   div.appendChild(p);
   Code language: JavaScript (javascript)

   4 để soạn các nút DOM và nối nó vào cây DOM

   let div = document.querySelector('.container');
   
   // compose DOM nodes
   let fragment = document.createDocumentFragment();
   for (let i = 0; i < 1000; i++) {
      let p = document.createElement('p');
      p.textContent = `Paragraph ${i}`;
      fragment.appendChild(p);
   }
   
   // append the fragment to the DOM tree
   div.appendChild(fragment);
   Code language: JavaScript (javascript)

   Trong ví dụ này, chúng tôi đã tạo các nút DOM bằng cách sử dụng đối tượng

   let div = document.querySelector('.container');
   
   let p = document.createElement('p');
   p.textContent = 'JS DOM';
   div.appendChild(p);
   Code language: JavaScript (javascript)

   4 và nối đoạn đó vào cây DOM đang hoạt động một lần ở cuối

   Một đoạn tài liệu không liên kết với cây DOM đang hoạt động, do đó, nó không phát sinh bất kỳ hiệu suất nào

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

   Thuộc tính innerHTML đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử .

   Nguy hiểm của việc sử dụng InternalHTML là gì?

   'innerHTML' đưa ra Rủi ro bảo mật . 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 nên sử dụng InternalHTML?

   innerHTML hữu ích tại bất kỳ lúc nào để chèn thẻ/nội dung HTML mới dưới dạng chuỗi và có thể dễ dàng chuyển hướng đến các thành phần cụ thể trong .

   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.