Tôi nên sử dụng InternalHTML hay createElement?

Question

Trong Hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo các phần tử mới trong JavaScript và cách thêm các loại nội dung khác nhau

Nội dung chính Show

Thêm phần tử con vào phần tử mới bằng DOM
InternalHTML so với InternalText
Tại sao lại sử dụng createElement thay vì InternalHTML?
Điều gì tốt hơn InternalHTML?
Khi nào tôi nên sử dụng InternalHTML?
Nhược điểm của việc sử dụng InternalHTML là gì?

1009 lượt xem

Tôi nên sử dụng InternalHTML hay createElement?

Bởi. Jacob

Đã chỉnh sửa. 2020-09-26 11. 57

Để tạo một phần tử HTML bằng JavaScript đơn giản, chúng ta có thể sử dụng phương thức DOM createElement() hoặc chúng ta có thể chọn chỉ cần chèn HTML trực tiếp

Không có cách nào được coi là "tốt nhất" và cách sử dụng nào phụ thuộc chủ yếu vào sở thích cá nhân, phong cách mã hóa và yêu cầu của dự án

Một mặt, có thể lập luận rằng các phương thức DOM sẽ an toàn hơn khi sử dụng trong thời gian dài, vì phần tử sẽ tự động bị đóng và việc thêm các thuộc tính cũng ít bị lỗi chính tả và các lỗi khác có xu hướng phát sinh theo thời gian. Mặt khác, cũng có thể lập luận rằng việc sử dụng InternalHTML yêu cầu ít mã hơn và do đó hoạt động nhanh hơn và sạch hơn.

Để tạo một phần tử mới bằng các phương thức DOM và điền vào nó một số nội dung, chúng tôi có thể sử dụng như sau

let newElement = document.createElement('div');
newElement.innerText = 'Hallo World';
document.body.appendChild(newElement);

Đoạn mã trên có thể được giảm thiểu hơn nữa để

let newElement = document.createElement('div').innerText = 'Hallo World';
document.body.appendChild(newElement);

Thay vào đó, nếu chúng tôi sử dụng InternalHTML, chúng tôi có thể làm những việc như in đậm hoặc in nghiêng văn bản bằng cách sử dụng b và i trong nội dung

let newElement = document.createElement('div');
newElement.innerHTML = 'Hallo World';
document.body.appendChild(newElement);

Thêm phần tử con vào phần tử mới bằng DOM

Khi chúng ta sử dụng các phương thức HTML DOM, chúng ta có thể tạo nhiều phần tử mới bằng cách sử dụng phương thức createElement(), sau đó "nối" các phần tử này vào các phần tử "trừu tượng" khác bằng phương thức appendChild()

Ghi chú. Trong trường hợp này, "trừu tượng" đơn giản có nghĩa là chúng ta chưa thêm phần tử vào HTML DOM

Trong đoạn mã ví dụ sau, để đơn giản hóa mọi thứ, tôi sẽ chỉ tạo hai phần tử trừu tượng và nối phần tử này với phần tử kia, rồi cuối cùng thêm phần tử vào DOM HTML thực tế

// Create the HTML Elements
let newDiv = document.createElement('div'); // The parent element
let newP = document.createElement('p'); // The child element

// Include some text in the paragraph element
newP.innerText = 'This is the paragraph';

// Append the child paragraph to the parent div
newDiv.appendChild(newP)

document.body.appendChild(newDiv);

Có thể hiểu được, một số nhà phát triển web thấy dễ dàng hơn khi chỉ sử dụng InternalHTML

InternalHTML so với InternalText

Sự khác biệt giữa InternalHTML và InternalText là InternalHTML sẽ cho phép bạn làm việc với nội dung HTML thô của một nút, trong khi InternalText chỉ cho phép bạn đặt và truy xuất nội dung văn bản thuần túy của một nút.

Khi sử dụng InternalText để truy xuất nội dung, các phần tử HTML sẽ tự động bị loại bỏ, trong khi InternalHTML sẽ giữ nguyên chúng

Khi sử dụng InternalText, bạn không phải xử lý các ký tự đặc biệt, vì chúng sẽ được trình duyệt hiểu là chữ. Tuy nhiên, khi sử dụng InternalHTML, bạn sẽ cần thay thế các ký tự bằng các thực thể HTML của chúng. Tôi. e. ""

Để 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

document.body.innerHTML = "";

4

Một chuỗi chứa tuần tự hóa HTML của hậu duệ của phần tử. Đặt giá trị của

document.body.innerHTML = "";

3 sẽ xóa tất cả các phần tử con của phần tử và thay thế chúng bằng các nút được tạo bằng cách phân tích cú pháp HTML được cung cấp trong chuỗi htmlString

document.body.innerHTML = "";

6

document.body.innerHTML = "";

7

Bị ném nếu cố gắng đặt giá trị của

document.body.innerHTML = "";

3 bằng cách sử dụng chuỗi không phải là HTML được định dạng đúng

document.body.innerHTML = "";

9

document.body.innerHTML = "";

7

Bị ném nếu cố gắng chèn HTML vào một nút có nút gốc là một

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

1

Thuộc tính

document.body.innerHTML = "";

3 có thể được sử dụng để kiểm tra nguồn HTML hiện tại của trang, bao gồm mọi thay đổi đã được thực hiện kể từ khi trang được tải lần đầu

Việc đọc

document.body.innerHTML = "";

3 khiến tác nhân người dùng tuần tự hóa đoạn HTML hoặc XML bao gồm các phần tử con của phần tử. Chuỗi kết quả được trả về

let contents = myElement.innerHTML;

Điều này cho phép bạn xem đánh dấu HTML của các nút nội dung của phần tử

Ghi chú. Đoạn HTML hoặc XML được trả về được tạo dựa trên nội dung hiện tại của phần tử, do đó, đánh dấu và định dạng của đoạn được trả về có khả năng không khớp với đánh dấu trang gốc

Đặt giá trị của

document.body.innerHTML = "";

3 cho phép bạn dễ dàng thay thế nội dung hiện có của một phần tử bằng nội dung mới

Ghi chú. Đây là câu hỏi nếu chuỗi được chèn có thể chứa nội dung độc hại tiềm ẩn. Khi chèn dữ liệu do người dùng cung cấp, bạn phải luôn cân nhắc sử dụng

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

5 để làm sạch nội dung trước khi chèn

Ví dụ: bạn có thể xóa toàn bộ nội dung của tài liệu bằng cách xóa nội dung của thuộc tính

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

6 của tài liệu

document.body.innerHTML = "";

Ví dụ này tìm nạp đánh dấu HTML hiện tại của tài liệu và thay thế các ký tự

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

7 bằng thực thể HTML

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

8, do đó về cơ bản chuyển đổi HTML thành văn bản thô. Điều này sau đó được bao bọc trong một phần tử

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

9. Sau đó, giá trị của

document.body.innerHTML = "";

3 được thay đổi thành chuỗi mới này. Do đó, nội dung tài liệu được thay thế bằng màn hình hiển thị toàn bộ mã nguồn của trang

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

chi tiết hoạt động

Chính xác thì điều gì sẽ xảy ra khi bạn đặt giá trị là

document.body.innerHTML = "";

3?

Giá trị đã chỉ định được phân tích cú pháp dưới dạng HTML hoặc XML (dựa trên loại tài liệu), dẫn đến một đối tượng
```
<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>
```
2 đại diện cho tập hợp các nút DOM mới cho các thành phần mới

Nếu phần tử có nội dung đang được thay thế là phần tử

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

3 thì thuộc tính

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

5 của phần tử

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

5 được thay thế bằng phần tử

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

2 mới được tạo ở bước 1

Đối với tất cả các phần tử khác, nội dung của phần tử được thay thế bằng các nút trong
```
<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>
```
2 mới

Đặt giá trị của

document.body.innerHTML = "";

3 cho phép bạn thêm nội dung mới vào phần tử hiện có

Ví dụ: chúng tôi có thể nối thêm một mục danh sách mới (_______25_______9) vào danh sách hiện có (

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

0)

HTML

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

JavaScript

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

Xin lưu ý rằng việc sử dụng

document.body.innerHTML = "";

3 để nối các phần tử HTML (e. g.

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

2) sẽ dẫn đến việc loại bỏ bất kỳ người nghe sự kiện nào đã đặt trước đó. Nghĩa là, sau khi bạn thêm bất kỳ phần tử HTML nào theo cách đó, bạn sẽ không thể nghe các trình xử lý sự kiện đã đặt trước đó

Không có gì lạ khi thấy

document.body.innerHTML = "";

3 được sử dụng để chèn văn bản vào trang web. Điều này có khả năng trở thành phương tiện tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm ẩn

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

Mặc dù điều này có vẻ giống như một cuộc tấn công kịch bản chéo trang, nhưng kết quả là vô hại. HTML chỉ định rằng một thẻ

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

4 được chèn với

document.body.innerHTML = "";

3

Tuy nhiên, có nhiều cách để thực thi JavaScript mà không cần sử dụng các phần tử

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

4, do đó, vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng

document.body.innerHTML = "";

3 để đặt các chuỗi mà bạn không kiểm soát được. Ví dụ

const name = "";
el.innerHTML = name; // shows the alert

Vì lý do đó, bạn nên sử dụng thay vì

document.body.innerHTML = "";

3

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

5 để khử trùng văn bản trước khi nó được chèn vào DOM

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

0 khi chèn văn bản thuần túy, vì thao tác này sẽ chèn dưới dạng văn bản thô thay vì phân tích cú pháp dưới dạng HTML

Cảnh báo. Nếu dự án của bạn là dự án sẽ trải qua bất kỳ hình thức đánh giá bảo mật nào, việc sử dụng

document.body.innerHTML = "";

3 rất có thể sẽ khiến mã của bạn bị từ chối. Ví dụ: trong tiện ích mở rộng trình duyệt và gửi tiện ích mở rộng tới addons. mozilla. org, nó có thể bị từ chối trong quá trình xem xét. Vui lòng xem Chèn nội dung bên ngoài vào trang một cách an toàn để biết các phương pháp thay thế

Ví dụ này sử dụng

document.body.innerHTML = "";

3 để tạo cơ chế ghi thông báo vào hộp trên trang web

function log(msg) {
  const logElem = document.querySelector(".log");

  const time = new Date();
  const timeStr = time.toLocaleTimeString();
  logElem.innerHTML += `${timeStr}: ${msg}
`;
}

log("Logging mouse events inside this container…");

Hàm

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

4 tạo đầu ra nhật ký bằng cách lấy thời gian hiện tại từ đối tượng

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

5 bằng cách sử dụng

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

6 và tạo một chuỗi có dấu thời gian và nội dung thông báo. Sau đó, thông báo được thêm vào hộp có lớp

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

7

Chúng tôi thêm một phương pháp thứ hai ghi lại thông tin về các sự kiện dựa trên

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

8 (chẳng hạn như

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

9,

const name = "";
el.innerHTML = name; // shows the alert

0 và

const name = "";
el.innerHTML = name; // shows the alert

1)

function logEvent(event) {
  const msg = `Event ${event.type} at ${event.clientX}, ${event.clientY}`;
  log(msg);
}

Sau đó, chúng tôi sử dụng điều này làm trình xử lý sự kiện cho một số sự kiện chuột trên hộp chứa nhật ký của chúng tôi

const boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

HTML khá đơn giản cho ví dụ của chúng tôi

document.body.innerHTML = "";

0

const name = "";
el.innerHTML = name; // shows the alert

2 với lớp

const name = "";
el.innerHTML = name; // shows the alert

3 chỉ là hộp chứa phục vụ mục đích bố trí, trình bày nội dung với hộp bao quanh.

const name = "";
el.innerHTML = name; // shows the alert

2 có lớp là

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

7 là vùng chứa cho chính văn bản nhật ký

CSS sau tạo kiểu cho nội dung ví dụ của chúng tôi

document.body.innerHTML = "";

1

Nội dung kết quả trông như thế này. Bạn có thể xem đầu ra trong nhật ký bằng cách di chuyển chuột vào và ra khỏi hộp, nhấp vào hộp đó, v.v.

Tại sao lại sử dụng createElement thay vì InternalHTML?

Bạn nên sử dụng createElement nếu bạn muốn giữ các tham chiếu trong mã của mình . InternalHTML đôi khi có thể tạo ra một lỗi khó phát hiện.

Điều gì tốt hơn InternalHTML?

Ghi chú. Không giống như InternalHTML, textContent có hiệu suất tốt hơn vì giá trị của nó không được phân tích cú pháp dưới dạng HTML. Vì lý do đó, sử dụng textContent cũng có thể ngăn chặn các cuộc tấn công Cross-Site Scripting (XSS). Không giống như InternalText, textContent không biết về kiểu dáng CSS và sẽ không kích hoạt chỉnh lại dòng.

Khi nào tôi 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 .

Nhược điểm của việc sử dụng InternalHTML là gì?

Nhược điểm của InternalHTML . Khi chúng tôi đã sử dụng trình xử lý sự kiện thì trình xử lý sự kiện sẽ không tự động được gắn vào các phần tử mới được tạo bởi InternalHTML. It is very slow because as inner HTML already parses the content even we have to parse the content again so that's why it takes time. When we have used the event handlers then the event handlers are not automatically attached to the new elements created by innerHTML.

programming html

Tôi nên sử dụng InternalHTML hay createElement?

Thêm phần tử con vào phần tử mới bằng DOM

InternalHTML so với InternalText

chi tiết hoạt động

HTML

JavaScript

Tại sao lại sử dụng createElement thay vì InternalHTML?

Điều gì tốt hơn InternalHTML?

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

Nhược điểm của việc sử dụng InternalHTML là gì?

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