Tôi có thể sử dụng cái gì thay vì nối thêm vào JavaScript?

Tìm hiểu sự khác biệt chính giữa append[] và appendChild[] khi thêm một phần tử vào hệ thống phân cấp DOM trong JavaScript

• append[] so với appendChild[] → bạn đang ở đây
• nối thêm []

1. append[] Chấp nhận đối tượng nút/DOMStrings nhưng appendChild[] chỉ chấp nhận đối tượng nút

Phương thức append[] chấp nhận

• Đối tượng nút → là nút phần tử, nút văn bản, v.v.
• DOMStrings → là văn bản thuần túy trong dấu ngoặc kép

Phương thức appendChild[] chỉ chấp nhận

• đối tượng nút

Hãy xem điều đó trong hành động

1. 1 Thêm đối tượng nút Sử dụng append[] và appendChild[]

Đây là một đánh dấu HTML đơn giản

  
div 
1
  
div 
2
  
div 
3
  
div 
4

Bây giờ hãy thêm một đối tượng nút bằng cả hai phương thức append[] và appendChild[]

Nhận tham chiếu DOM của phần tử trình bao bọc hộp bằng cách gọi phương thức getElementById[] trên đối tượng tài liệu

const boxWrapper = document.getElementById["box-wrapper"];

const box = document.createElement["div"];
box.innerHTML = 'div 
 5';
box.style.backgroundColor = "orange";
box.classList.add["box"];
 
boxWrapper.append[box]; 
// or
boxWrapper.appendChild[box];
//works

Sau đó, tạo phần tử div bằng cách gọi hàm createElement[] trên đối tượng tài liệu

Sau đó, thêm văn bản, màu nền và lớp vào phần tử div vừa tạo

Cuối cùng, thêm nó vào hệ thống phân cấp DOM bằng cách gọi phương thức append[] hoặc appendChild[]

Và cả hai đều hoạt động như một sự quyến rũ

dùng thử

Xem phần Append bút và appendChild JavaScript #1 của SoftAuthor [@softauthor] trên CodePen

1. 2 Chỉ thêm DOMString bằng append[]

Bây giờ, hãy thêm một DOMString vào cuối các phần tử con bên trong phần tử cha của trình bao bọc hộp bằng phương thức append[]

const boxWrapper = document.getElementById["box-wrapper"];
boxWrapper.append["Not a box"]; // Success

Và nó sẽ hoạt động như mong đợi

Nhưng khi chúng ta sử dụng phương thức appendChild[], nó sẽ báo lỗi

boxWrapper.appendChild["Not a box"]; // Error - It's not of type 'Node'

Như tôi đã đề cập trước đó, điều này là do appendChild[] chỉ chấp nhận các Đối tượng nút

dùng thử

Xem phần Nối bút và JavaScript appendChild #1. 1 bởi SoftAuthor [@softauthor] trên CodePen

2. append[] Cho phép chúng tôi thêm nhiều đối tượng nút cùng một lúc Không giống như appendChild[]

append[] cho phép bạn thêm nhiều mục trong khi appendChild[] chỉ cho phép một mục duy nhất

Hãy thêm hai phần tử div [box5 và box6] sau phần tử con cuối cùng bên trong phần tử cha [phần#box-wrapper] bằng cách sử dụng phương thức append[]

const boxWrapper = document.getElementById["box-wrapper"];

const box5 = document.createElement["div"];
box5.innerHTML = 'div 
 5';
box5.classList.add["box"];

const box6 = document.createElement["div"];
box6.innerHTML = 'div 
 6';
box6.classList.add["box"];

boxWrapper.append[box5, box6];

Nối cả hai đối tượng nút phần tử div bằng cách chuyển chúng dưới dạng đối số của phương thức append[] được phân tách bằng dấu phẩy

dùng thử

Xem Pen Append JavaScript #3 của SoftAuthor [@softauthor] trên CodePen

Mặt khác, phương thức appendChild[] cho phép chúng ta chỉ thêm một phần tử tại một thời điểm

Bạn sẽ cần gọi lại nó bằng phần tử thứ hai để nối thêm phần tử khác

const boxWrapper = document.getElementById["box-wrapper"];
...
boxWrapper.appendChild[box5];
boxWrapper.appendChild[box6];

dùng thử

Xem Pen appendChild[] JavaScript #3 của SoftAuthor [@softauthor] trên CodePen

3. appendChild[] Trả về đối tượng nút nhưng append[] không

Phương thức appendChild[] sẽ trả về đối tượng nút được nối thêm trong khi append[] không có giá trị trả về

const boxWrapper = document.getElementById["box-wrapper"];

const box = document.createElement["div"];
box.innerHTML = 'div 
 5';
box.style.backgroundColor = "orange";
box.classList.add["box"];

console.log[boxWrapper.append[box]]; // undefined
console.log[boxWrapper.appendChild[box]]; // returns appended node object

Điều này thật tuyệt vì chúng ta có thể thêm một hoặc nhiều đối tượng nút con bằng cách xâu chuỗi chúng lại với nhau, đặc biệt khi sử dụng Object. giao phó

Chúng ta có thể sử dụng cái gì thay vì chắp thêm?

Có append trong JavaScript không?

Làm cách nào để có được giá trị chắp thêm trong JavaScript?

Ngược lại với append trong JavaScript là gì?