Cách gộp nhiều phần tử rồi cho kết quả vào một thẻ div trong JavaScript?

Cập nhật ngày 17/12/2021

Sau đây là cách để gộp nhiều phần tử rồi cho kết quả vào một thẻ div trong JavaScript.

Ví dụ DOM có cấu trúc như sau:

index.html
<div id="container">
  <!-- thêm phần tử vào đây -->
</div>

Các bước để gộp nhiều phần tử rồi cho kết quả vào một thẻ div trong JavaScript là:

  • Tạo một fragment ("document ảo") để chứa các phần tử DOM.
  • Duyệt mảng dữ liệu đầu vào:
    • Sử dụng phương thức createElement() để tạo phần tử DOM với dữ liệu được gán thông qua innerHTML.
    • Dùng phương thức appendChild() để thêm phần tử DOM vào fragment.
  • Sử dụng phương thức appendChild() để thêm fragment vào phần tử div.
main.js
// dữ liệu để tạo phần tử DOM
let fruits = ["apple", "orange", "banana"];

// tạo fragment để chứa các phần tử
let fragment = document.createDocumentFragment();

// duyệt mảng fruits để tạo ra các phần tử và thêm vào fragment
for (let item of fruits) {
  // tạo phần tử DOM
  let elm = document.createElement("li");

  // gán nội dung cho phần tử DOM
  elm.innerHTML = item;

  // thêm phần tử DOM vào fragment
  fragment.appendChild(elm);
}

// query phần tử DIV là container
let container = document.querySelector("#container");

// append fragment vào container
container.appendChild(fragment);

Tham khảo:

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

Cách kiểm tra phần tử DOM chứa class cho trước trong JavaScript?
Lấy thông tin thẻ meta trong JavaScript?
Chia sẻ:

Bình luận