JavaScript là ngôn ngữ lập trình linh hoạt cho phép tạo và thao tác các phần tử giống như HTML (Ngôn ngữ đánh dấu siêu văn bản). Nó tuân theo các phương thức “append()” và “appendChild()” để thực hiện chức năng này. Như tên gọi của chúng, cả hai phương thức này đều nối thêm các phần tử HTML như các đối tượng String hoặc Node. Tuy nhiên, chúng khác nhau tùy thuộc vào chức năng của chúng và các yếu tố khác.
Hướng dẫn này nhấn mạnh những điểm khác biệt chính giữa jQuery “ nối thêm ()” và JavaScript “ nối thêmTrẻ em ()”.
Trước khi chuyển sang sự khác biệt giữa jQuery “ nối thêm ()” và JavaScript “ nối thêmTrẻ em ()”, trước tiên hãy xem những điều cơ bản của các phương pháp này.
Phương thức append() của jQuery là gì?
jQuery “ nối thêm ()” sẽ chèn các đối tượng “Nút” và “Chuỗi” mong muốn vào cuối với tư cách là phần tử con cuối cùng của phần tử cha.
cú pháp
$ ( bộ chọn ) . nối thêm ( nội dung , chức năng ( mục lục , html ) )Trong cú pháp trên:
- nội dung : Nó đề cập đến các phần tử HTML, phần tử DOM hoặc đối tượng jQuery.
- chức năng : Đây là một tham số bổ sung chỉ định hàm JavaScript do người dùng xác định có các tham số “chỉ mục (vị trí phần tử)” và “html (html của các phần tử được chọn).
Phương thức appendChild() của JavaScript là gì?
Phương thức “appendChild()” chỉ thêm đối tượng “Node” sau phần tử con cuối cùng của phần tử cha. Đầu tiên, nó tạo đối tượng Node mong muốn bằng cách sử dụng phương thức “createElement()” và sau đó nối thêm đối tượng đó.
cú pháp
yếu tố. nối thêmTrẻ em ( nút )Cú pháp này chỉ yêu cầu một tham số, tức là, “ nút ”.
Như tên của chúng gợi ý, các phương pháp được thảo luận ở trên là khác nhau. Phần này chỉ ra một số yếu tố mà chúng khác nhau. Chúng ta hãy xem xét chúng.
Sự khác biệt giữa Phương thức append() của jQuery và Phương thức appendChild() của JavaScript
| Điều kiện | jQuery nối thêm () | JavaScript appendChild() |
|---|---|---|
| Cách sử dụng | Nó có thể được sử dụng để nối thêm phần tử gốc bằng cách thêm mới “ Nút ' Và ' Sợi dây ” đối tượng cùng một lúc. | Nó chỉ có thể được sử dụng để nối thêm phần tử cha bởi phần tử mới “ Nút ” được tạo bằng cách sử dụng “ tạo phần tử ()' phương pháp. |
| Nhiều đối tượng nút | Các ' nối thêm ()” có thể thêm nhiều đối tượng Node trong phần tử cha được liên kết của nó cùng một lúc theo định dạng sau. Định dạng : “div.append(con đầu lòng, con thứ hai, ‘Linuxhint’);” |
Các ' nối thêmTrẻ em ()” hoạt động tốt với nhiều đối tượng Node nhưng nó chỉ nối thêm phần tử con đầu tiên tại một thời điểm và sau đó là phần tử tiếp theo. Định dạng : “div.appendChild(con đầu lòng, con thứ hai, ‘Linuxhint’);” |
| Giá trị trả về | Các ' nối thêm ()” không trả về đối tượng Node được nối thêm vì nó hiển thị giá trị trả về “không xác định”, tức là Định dạng : console.log(appendChildValue) // không xác định |
Mặt khác, “ nối thêmTrẻ em ()” trả về một giá trị chứa đối tượng Node được nối thêm. Định dạng : console.log(appendChildValue) //
|
Bây giờ hãy chuyển sang triển khai thực tế những điểm khác biệt chính được liệt kê.
Sự khác biệt 1: Áp dụng các Phương thức append() của jQuery và JavaScript appendChild()
Theo sự khác biệt đầu tiên, “ nối thêm ()” phương thức nối thêm cả Nút và Chuỗi trong khi phương thức “appendChild()” chỉ nối thêm các đối tượng Nút.
Mã HTML
Trước tiên, hãy xem mã HTML đã nêu:
< thân hình >< h2 > Phương thức 'chắp thêm ()' của jQuery < / h2 > // Để nối thêm () < h2 > Phương thức 'appendChild()' của jQuery < / h2 > //Đối với appendChild()
< cái nút nhận dạng = 'btn1' trong một cái nhấp chuột = 'myFunc1()' > Nối chuỗi DOM < / cái nút >
< cái nút nhận dạng = 'btn2' trong một cái nhấp chuột = 'myFunc2()' > Nối nút DOM < / cái nút >
< P nhận dạng = 'vì' > Đây là một đoạn văn. < / P >
< ol nhận dạng = 'danh sách' >
< cái đó > Hướng dẫn JavaScript 1 < / cái đó >
< cái đó > Hướng dẫn JavaScript 2 < / cái đó >
< cái đó > Hướng dẫn JavaScript 3 < / cái đó >
< / ol >
< / thân hình >
Trong các dòng mã trên:
- Thẻ “
” xác định tiêu đề phụ của cấp 2.
- Các thẻ “
- Thẻ “
” tạo một đoạn trống với id được chỉ định là “para” để hiển thị giá trị chuỗi được nối thêm.
- Thẻ “
- ” thêm danh sách có thứ tự với id là “danh sách” và các mục được liệt kê với sự trợ giúp của thẻ “
- ”.
Ghi chú : Thực hiện theo mã HTML được viết ở trên trong điểm khác biệt đầu tiên của cả hai phương thức “append()” và “appendChild()”.
Phương thức “append()” Mã jQuery
Đầu tiên, tổng quan về mã jQuery phương thức “append()”:
< cái đầu >< tập lệnh src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > kịch bản >
< kịch bản >
$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {
$ ( '#btn1' ) . nhấp chuột ( chức năng ( ) {
$ ( 'P' ) . nối thêm ( ' Chuỗi nối .' ) ;
} ) ;
$ ( '#btn2' ) . nhấp chuột ( chức năng ( ) {
$ ( 'ô' ) . nối thêm ( '
} ) ;
} ) ;
kịch bản >
cái đầu >
Trong các dòng mã trên:
- Đầu tiên, chỉ định jQuery “ CDN ” đường dẫn từ trang web chính thức của nó “ https://jquery.com/ ” với sự giúp đỡ của “ src ' thuộc tính.
- Tiếp theo, thêm một phần tập lệnh nhỏ trước tiên sử dụng “ sẵn sàng ()” để gọi phương thức “ đã nêu chức năng ()” khi tài liệu HTML được tải.
- Sau đó, “ nhấp chuột ()” thực thi chức năng được liên kết với nút có id là “ btn1 ” khi nhấp vào nút.
- Trong định nghĩa chức năng, ' nối thêm ()” được sử dụng để nối phần tử đoạn được nhắm mục tiêu với chuỗi đã nêu.
- Quá trình tương tự được thực hiện cho phần bổ sung “ danh sách được yêu cầu ” tức là đối tượng Node để nối nó vào mục đã cho.
đầu ra
Ở đây, người ta xác nhận rằng cả hai đối tượng “Chuỗi” và “Nút” đều được thêm vào với sự trợ giúp của phương thức “append()”.
Phương thức “appendChild()” Mã JavaScript
Bây giờ, hãy xem thực tế phương thức JavaScript “appendChild()”:
< kịch bản >chức năng myFunc1 ( ) {
vì. nối thêmTrẻ em ( '
Chuỗi nối
' ) //Nối chuỗi DOM} chức năng myFunc2 ( ) {
hằng số yếu tố = tài liệu. tạo phần tử ( 'cái đó' ) ;
hằng số nút = tài liệu. tạoTextNode ( 'Mục được thêm vào' ) ;
yếu tố. nối thêmTrẻ em ( nút ) ; //Nối nút DOM
hằng số yếu tố = tài liệu. getElementById ( 'danh sách' ) ;
yếu tố. nối thêmTrẻ em ( yếu tố ) ;
}
kịch bản >
Trong đoạn mã trên:
- Xác định tên hàm “ myFunc1 ()” sử dụng phương thức “appendChild()” để nối thêm đoạn đã thêm với chuỗi đã cho.
- Tiếp theo, trong phần “ myFunc2 ()”, phương thức “createElement()” tạo một phần tử danh sách mới và sau đó thêm một số văn bản vào đó bằng cách sử dụng phương thức “createTextNode()”.
- Sau đó, nối nút danh sách đã tạo với văn bản của nó bằng phương thức “appendChild()”.
- Cuối cùng, nối Node danh sách mới được tạo vào danh sách được sắp xếp đã truy cập có id là “list” với sự trợ giúp của phương thức “appendChild()”.
đầu ra
Như đã thấy, chỉ có đối tượng “Nút” được thêm vào khi nhấp vào nút chứ không phải “Chuỗi”.
Lỗi
Nhấn “F12” để mở bảng điều khiển web và kiểm tra sự cố:
Như đã thấy, bảng điều khiển hiển thị lỗi khi nối thêm đối tượng Chuỗi bằng phương thức “appendChild()”. Do đó, người ta xác nhận rằng phương thức “appendChild()” không nối thêm một đối tượng Chuỗi.
Sự khác biệt 2: Áp dụng các phương thức jQuery append() và JavaScript appendChild() trên nhiều đối tượng nút
Sự khác biệt thứ hai giữa các phương thức “append()” và “appendChild()” có thể được phân tích bằng cách thực hiện các phương thức này trên nhiều đối tượng nút. Để xem triển khai thực tế của nó, hãy làm theo các mã đã cho.
Mã HTML
Hãy xem qua mã HTML:
< div nhận dạng = 'div chính' >< div phong cách = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Một < / div >
< div phong cách = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Hai < / div >
< div phong cách = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Ba < / div >
< / div >
Ở đây, các dòng mã trên chứa một phần tử chính “
Ghi chú : Mã HTML được viết ở trên được tuân theo trong điểm khác biệt thứ hai của cả hai phương thức “append()” và “appendChild()”.
phương thức chắp thêm ()
Bây giờ, hãy tiếp tục với đoạn script sau:
< kịch bản >hằng số maindiv = tài liệu. getElementById ( 'div chính' ) ;
hằng số div4 = tài liệu. tạo phần tử ( 'div' ) ;
div4. bên trongHTML = 'Bốn' ;
div4. phong cách . màu nền = 'hồng' ;
div4. danh sách lớp học . thêm vào ( 'div' ) ; hằng số div5 = tài liệu. tạo phần tử ( 'div' ) ;
div5. bên trongHTML = 'Năm' ;
div5. phong cách . màu nền = 'hồng' ;
div5. danh sách lớp học . thêm vào ( 'div' ) ;
maindiv. nối thêm ( div4 , div5 ) ;
kịch bản >
Trong đoạn mã trên:
- Biến “maindiv” truy cập “div” đã thêm bằng cách sử dụng id “main-div” của nó với sự trợ giúp của phương thức “getElementById()”.
- Tiếp theo, phương thức “createElement()” tạo một đối tượng Node “div” mới, thêm văn bản đã chỉ định bằng thuộc tính “innerHTML” và áp dụng màu nền thông qua thuộc tính “style.backgroundcolor”.
- Sau đó, phương thức “add()” thêm các thuộc tính CSS của lớp đã chỉ định vào nó bằng thuộc tính “classList”.
- Quy trình tương tự được thực hiện cho phần tử “” mới được tạo tiếp theo.
- Cuối cùng, cả hai đối tượng Node mới được tạo đều được thêm vào cùng một lúc với sự trợ giúp của phương thức “append()”.
đầu ra
Ở đây, nhiều đối tượng Node mới được tạo sẽ được thêm vào cùng một phần tử cha tương ứng.
Phương thức “appendChild()”
Tiếp theo, tiếp tục với phương thức “appendChild()”:
< kịch bản >
maindiv. nối thêmTrẻ em ( div4 ) ;
maindiv. nối thêmTrẻ em ( div5 ) ;
kịch bản >Như đã thấy, phương thức “appendChild()” thêm nhiều đối tượng Node lần lượt vào cùng một phần tử cha.
đầu ra
Đầu ra giống như phương thức “append()” nhưng khác ở chỗ chỉ định các đối tượng Node.
Sự khác biệt 3: Giá trị trả về của các Phương thức append() và JavaScript appendChild() được áp dụng
Điểm khác biệt cuối cùng là “giá trị trả về” của phương thức “append()” và “appendChild()”. Hãy xem nó thực tế.
Ghi chú : Mã HTML giống với Khác biệt 2 (Multiple Node Objects).
Phương thức “chắp thêm ()”
Nhìn vào các dòng mã đã cho:
< kịch bản >
bảng điều khiển. đăng nhập ( maindiv. nối thêm ( div4 ) ) ;
kịch bản >Ở đây, phương thức “console.log()” được áp dụng để kiểm tra giá trị trả về của phương thức “append()” trong khi nối thêm đối tượng Node đã chỉ định.
đầu ra
Nhấn “F12” để mở bảng điều khiển web:
Như đã thấy, giá trị trả về của phương thức “append()” là “ không xác định ”.
Phương thức appendChild()
Bây giờ, hãy xem đoạn mã sau sử dụng phương thức “appendChild()”:
< kịch bản >
bảng điều khiển. đăng nhập ( maindiv. nối thêmTrẻ em ( div4 ) ) ;
kịch bản >Chỉ định phương thức “appendChild()” với phương thức “console.log()” giống như phương thức “append()”.
đầu ra
Ở đây, đầu ra trả về phần tử HTML được nối thêm thay vào đó bao gồm các thuộc tính kiểu dáng.
Phần kết luận
jQuery “ nối thêm ()” và JavaScript “ nối thêmTrẻ em ()” khác nhau trên cơ sở “ cú pháp”, “cách sử dụng” và “nhiều đối tượng Node ”. Hơn nữa, “của họ giá trị trả về ” cũng khác nhau. Cả hai phương pháp đều hữu ích và việc sử dụng chúng tùy thuộc vào lựa chọn của người dùng. Hướng dẫn này liệt kê sự khác biệt giữa jQuery “ nối thêm ()” và JavaScript “ nối thêmTrẻ em ()” trên thực tế.