Giải thích JavaScript appendChild: Cách thêm phần tử DOM một cách an toàn (có ví dụ)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Tại sao nên học thao tác DOM trong JavaScript?

JavaScript là ngôn ngữ lập trình chính để tạo ra hành vi tương tác trên các trang web. Trong phát triển web, bạn thường cần thêm hoặc xóa các phần tử một cách động. Để làm được điều này, bạn cần có kỹ năng hiểu và thao tác đúng DOM (Document Object Model).

DOM biểu diễn một tài liệu HTML hoặc XML dưới dạng cây cấu trúc, và JavaScript cho phép bạn thay đổi nội dung và cấu trúc của trang. Điều này cho phép tạo nội dung một cách động dựa trên hành động của người dùng và cập nhật những gì người dùng nhìn thấy trên màn hình.

Trong bài viết này, chúng tôi tập trung vào phương thức appendChild, một phương thức cơ bản nhưng thường được sử dụng, và giải thích mọi thứ từ cách sử dụng cụ thể đến các ví dụ thực tế một cách dễ hiểu.

appendChild là gì? Tổng quan và các trường hợp sử dụng

appendChild là một trong các phương thức thao tác DOM của JavaScript. Nó thêm một phần tử con mới vào một phần tử được chỉ định.

Bằng cách sử dụng phương thức này, bạn có thể dễ dàng thực hiện các việc như:

• Tạo một phần tử mới và thêm nó vào trang.
• Tăng động các trường biểu mẫu hoặc mục danh sách.
• Chèn nội dung khi một nút được nhấn.

Ví dụ, đoạn mã sau tạo một phần tử div mới và gắn nó vào một phần tử cha:

var parentElement = document.getElementById('container');

var newElement = document.createElement('div');
newElement.textContent = 'New element';

parentElement.appendChild(newElement);

Như bạn thấy, appendChild đơn giản, nhưng lại cung cấp chức năng rất mạnh mẽ.

Những gì bạn sẽ học trong bài viết này

Trong bài viết này, chúng tôi sẽ giải thích chi tiết các nội dung sau:

1. Cú pháp cơ bản và cách sử dụng appendChild
2. Các ví dụ thực tế (thêm mục danh sách và trường biểu mẫu, v.v.)
3. So sánh giữa appendChild và các phương thức khác (insertBefore và append)
4. Các lưu ý quan trọng và mẹo để cải thiện hiệu năng
5. Các câu hỏi thường gặp và cách giải quyết chúng

Bằng cách đọc hướng dẫn này, bạn sẽ có được hiểu biết vững chắc về thao tác DOM trong JavaScript và học được các kỹ năng hữu ích trong phát triển web thực tế.

2. Những nguyên tắc cơ bản của appendChild và cách sử dụng

Cú pháp và vai trò của appendChild

appendChild là một phương thức được dùng để thêm một phần tử con mới vào một phần tử cha được chỉ định. Nó chèn một nút vào cuối nút cha trong cây DOM.

Cú pháp cơ bản

parentElement.appendChild(childElement);

• parentElement : Phần tử cha mà phần tử con sẽ được thêm vào.
• childElement : Phần tử con sẽ được thêm vào phần tử cha.

Với cú pháp này, bạn có thể thêm một nút mới vào bất kỳ phần tử nào trong cây DOM.

Cách sử dụng cơ bản của appendChild

1. Tạo một phần tử mới và gắn nó

Dưới đây là một ví dụ về việc thêm một phần tử div mới bằng cách sử dụng appendChild.

var parentElement = document.getElementById('container');

var newElement = document.createElement('div');
newElement.textContent = 'New element';

parentElement.appendChild(newElement);

Giải thích mã

1. Lấy phần tử cha: Sử dụng document.getElementById('container') để lấy một phần tử cụ thể trong HTML.
2. Tạo một phần tử mới: Sử dụng document.createElement('div') để tạo một phần tử div mới.
3. Đặt nội dung văn bản: Sử dụng textContent để chèn một chuỗi vào phần tử.
4. Gắn vào phần tử cha: Sử dụng appendChild để thêm phần tử con vào cuối phần tử cha.

Giải thích từng bước về việc thêm một phần tử

1. Mã HTML

<div id="container"></div>

2. Mã JavaScript

var container = document.getElementById('container');
var newDiv = document.createElement('div');
newDiv.textContent = 'Dynamically added element';
container.appendChild(newDiv);

3. Kết quả

Khi bạn chạy đoạn mã trên, cấu trúc HTML sẽ trở thành:

<div id="container">
  <div>Dynamically added element</div>
</div>

Điều này giúp dễ dàng thêm các phần tử một cách động trên một trang web.

Lưu ý quan trọng khi di chuyển các phần tử đã tồn tại

appendChild có thể được sử dụng không chỉ cho các phần tử mới, mà còn để định vị lại các phần tử hiện có. Tuy nhiên, lưu ý rằng phần tử sẽ được di chuyển từ vị trí gốc của nó, như được hiển thị bên dưới.

Ví dụ: Di chuyển một Phần tử

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var child = document.getElementById('child');

// Move child from parent1 to parent2
parent2.appendChild(child);

Trong mã này, phần tử child di chuyển từ phần tử cha gốc sang phần tử cha mới. Vì cùng một phần tử không thể được thêm nhiều lần, hãy nhớ rằng appendChild hoạt động như một hoạt động “di chuyển”.

Ví dụ: Thêm một Nút Văn bản

Bạn cũng có thể thêm động một nút văn bản, không chỉ các phần tử HTML.

Ví dụ Mã

var parent = document.getElementById('container');
var textNode = document.createTextNode('A text node has been added');
parent.appendChild(textNode);

Kết quả

<div id="container">A text node has been added</div>

Cách tiếp cận này hữu ích khi bạn chỉ muốn thêm văn bản thuần túy.

3. Các Ví dụ Thực tế

Thêm Động Các Mục Danh sách

Trong các ứng dụng web, bạn thường cần thêm động các mục danh sách dựa trên đầu vào của người dùng hoặc dữ liệu bên ngoài. Dưới đây là ví dụ về việc thêm các mục danh sách bằng appendChild.

Ví dụ Mã

<ul id="list"></ul>
<button id="addItem">Add item</button>

var list = document.getElementById('list');
var button = document.getElementById('addItem');

// Add a list item on button click
button.addEventListener('click', function () {
    // Create a new list item
    var newItem = document.createElement('li');
    newItem.textContent = 'New item';

    // Append to the list
    list.appendChild(newItem);
});

Giải thích

1. Lấy phần tử cha: Sử dụng document.getElementById('list') để lấy phần tử ul.
2. Đặt trình nghe sự kiện: Quy trình chạy khi nút được nhấn.
3. Tạo một mục mới: Sử dụng document.createElement('li') để tạo động một phần tử li.
4. Thêm mục: Sử dụng appendChild để thêm mục vào cuối danh sách.

Kết quả

Mỗi khi bạn nhấn nút, một mục danh sách mới sẽ được thêm.

Tạo Các Trường Mẫu với Nút

Nếu bạn muốn thêm động các trường mẫu thông qua hành động của người dùng, appendChild cũng rất tiện lợi.

Ví dụ Mã

<div id="formContainer"></div>
<button id="addField">Add field</button>

var container = document.getElementById('formContainer');
var button = document.getElementById('addField');

// Add a form field on button click
button.addEventListener('click', function () {
    var inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.placeholder = 'New field';
    container.appendChild(inputField);
});

Giải thích

1. Lấy bộ chứa mẫu: Chỉ định phần tử cha nơi các trường sẽ được thêm.
2. Tạo một trường mới: Sử dụng document.createElement('input') để tạo một trường nhập.
3. Đặt thuộc tính: Đặt động các thuộc tính như type và placeholder.
4. Thêm vào mẫu: Thêm một trường mỗi khi nút được nhấn.

Kết quả

Khi bạn nhấn nút, các trường nhập mới sẽ được thêm từng cái một.

Ví dụ: Thêm Động một Hình ảnh

Một tình huống phổ biến là thêm động hình ảnh vào trang web.

Ví dụ Mã

<div id="imageContainer"></div>
<button id="addImage">Add image</button>

var container = document.getElementById('imageContainer');
var button = document.getElementById('addImage');

// Add an image on button click
button.addEventListener('click', function () {
    var img = document.createElement('img');
    img.src = 'example.jpg';
    img.alt = 'Dynamically added image';
    img.width = 200;
    container.appendChild(img);
});

Giải thích

1. Lấy phần tử cha: Lấy phần tử chứa nơi hình ảnh sẽ được thêm.
2. Tạo phần tử hình ảnh: Sử dụng document.createElement('img') để tạo động một phần tử hình ảnh.
3. Đặt thuộc tính: Chỉ định các thuộc tính như src và alt.
4. Thêm hình ảnh: Thêm hình ảnh theo thứ tự thông qua các hành động nhấp chuột.

Kết quả

Khi bạn nhấp vào nút, hình ảnh được chỉ định sẽ được thêm vào trang.

Ví dụ: Thêm nhiều phần tử cùng một lúc

Khi bạn muốn thêm nhiều phần tử cùng một lúc, việc sử dụng DocumentFragment là hiệu quả.

Ví dụ mã

<div id="multiContainer"></div>
<button id="addMultiple">Add multiple</button>

var container = document.getElementById('multiContainer');
var button = document.getElementById('addMultiple');

// Add multiple elements on button click
button.addEventListener('click', function () {
    var fragment = document.createDocumentFragment();

    for (var i = 1; i <= 5; i++) {
        var newDiv = document.createElement('div');
        newDiv.textContent = 'Item ' + i;
        fragment.appendChild(newDiv);
    }

    container.appendChild(fragment);
});

Giải thích

1. Tạo một DocumentFragment: Tạo một container tạm thời trong bộ nhớ.
2. Thêm các phần tử trong vòng lặp: Thêm các phần tử mới vào DocumentFragment từng cái một.
3. Thêm trong một thao tác: Cuối cùng, thêm tất cả cùng một lúc vào phần tử cha, cải thiện hiệu suất.

Kết quả

Khi được nhấp, năm mục sẽ được thêm cùng một lúc.

4. So sánh appendChild với các phương pháp khác

appendChild vs insertBefore

Tổng quan

appendChild thêm một phần tử vào cuối của nút cha, trong khi insertBefore chèn nó trước một nút được chỉ định.

Cú pháp cơ bản

parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement);

Ví dụ

<div id="container">
  <p id="first">First element</p>
</div>

Sử dụng appendChild

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement);

Kết quả:

<div id="container">
  <p id="first">First element</p>
  <p>Appended element</p>
</div>

Sử dụng insertBefore

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Inserted element';
var firstElement = document.getElementById('first');
parent.insertBefore(newElement, firstElement);

Kết quả:

<div id="container">
  <p>Inserted element</p>
  <p id="first">First element</p>
</div>

Sự khác biệt chính

• appendChild: Thêm một phần tử vào cuối phần tử cha.
• insertBefore: Chèn một phần tử trước một phần tử cụ thể, cho phép đặt vị trí linh hoạt hơn.

appendChild vs append

Tổng quan

Phương thức append tương tự như appendChild, nhưng nó được giới thiệu trong một tiêu chuẩn JavaScript tương đối mới hơn.

Cú pháp cơ bản

parentElement.appendChild(newElement); // Only nodes can be appended
parentElement.append('Text', newElement); // Text can also be appended

Ví dụ

Sử dụng appendChild

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement);

Kết quả:

<div id="container">
  <p>Appended element</p>
</div>

Sử dụng append

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.append('Text', newElement);

Kết quả:

<div id="container">
  Text
  <p>Appended element</p>
</div>

Sự khác biệt chính

• appendChild: Chỉ có các nút (node) mới có thể được thêm. Bạn không thể thêm văn bản trực tiếp.
• append: Bạn có thể thêm cả nút và văn bản trong một thao tác, điều này làm cho nó linh hoạt hơn.
• Compatibility: Vì append là mới hơn, các trình duyệt cũ có thể không hỗ trợ nó.

appendChild vs innerHTML

Overview

innerHTML coi cấu trúc HTML như một chuỗi, trong khi appendChild coi các phần tử như các nút.

Example

Using appendChild

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement);

Using innerHTML

var parent = document.getElementById('container');
parent.innerHTML += '<p>Appended element</p>';

Key Differences

• appendChild:
• Coi các phần tử là nút, giúp các thao tác an toàn hơn.
• Cho phép bạn thêm phần tử trong khi vẫn giữ lại các trình nghe sự kiện.
• innerHTML:
• Dễ sử dụng vì nó coi HTML như một chuỗi, nhưng tăng nguy cơ lỗi do cú pháp không hợp lệ.
• Các phần tử con và trình nghe sự kiện hiện có có thể bị mất, vì vậy cần thận trọng.

How to Choose and Recommendations

5. Notes and Best Practices

1. Be Careful When Repositioning Nodes

What to Watch Out For

Khi bạn sử dụng appendChild để thêm một phần tử đã tồn tại vào vị trí khác, phần tử đó được di chuyển khỏi vị trí gốc. Nó không được sao chép và đặt ở nhiều vị trí đồng thời.

Example

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var child = document.getElementById('child');

// Append child to parent2 (move)
parent2.appendChild(child);

Result

Trong đoạn mã này, child bị loại bỏ khỏi parent1 và được di chuyển tới parent2. Nếu bạn muốn thêm cùng một nội dung nhiều lần, bạn phải tạo một phần tử mới.

Solution

Nếu bạn muốn sao chép một phần tử, hãy sử dụng phương thức cloneNode().

var clone = child.cloneNode(true); // true copies child nodes as well
parent2.appendChild(clone);

2. Performance Considerations

What to Watch Out For

Nếu bạn thêm nhiều phần tử bằng cách gọi appendChild liên tục trong một vòng lặp, bạn sẽ tăng số lần thao tác DOM và có thể làm giảm hiệu năng.

Solution

Sử dụng DocumentFragment để xây dựng các phần tử trong một container ảo trong bộ nhớ, sau đó thêm chúng vào DOM một lần duy nhất.

Example

var parent = document.getElementById('container');
var fragment = document.createDocumentFragment();

for (var i = 0; i < 10; i++) {
    var div = document.createElement('div');
    div.textContent = 'Item ' + (i + 1);
    fragment.appendChild(div);
}

// Append to the parent at once
parent.appendChild(fragment);

Benefits

• Giảm thiểu truy cập DOM và cải thiện hiệu năng.
• Giúp ngăn chặn hiện tượng nhấp nháy (flicker) khi render.

3. When to Use innerHTML vs appendChild

What to Watch Out For

innerHTML ngắn gọn, nhưng có những nhược điểm sau:

• Lỗi cú pháp HTML dễ xảy ra hơn.
• Các phần tử và trình nghe sự kiện hiện có có thể bị mất.

Solution

Đối với việc thêm hoặc thao tác các phần tử, sử dụng appendChild an toàn hơn.

Example: A Common innerHTML Pitfall

var parent = document.getElementById('container');
parent.innerHTML = '<p>Appended element</p>'; // All existing elements are removed

Recommended: Using appendChild

var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement); // Safely appended

4. Preserving Event Listeners

What to Watch Out For

Khi bạn di chuyển một phần tử bằng appendChild, các trình nghe sự kiện của nó vẫn được gắn giữ. Tuy nhiên, nếu bạn dùng innerHTML, các trình nghe sự kiện sẽ bị loại bỏ.

Solution

Khi bạn thao tác động các phần tử một cách động, hãy chú ý cách bạn đăng ký các sự kiện.

Example: Keeping an Event Listener

var button = document.createElement('button');
button.textContent = 'Click';
button.addEventListener('click', function () {
    alert('Clicked!');
});

// Append with appendChild
document.body.appendChild(button); // The event listener is preserved

Khi Sử Dụng innerHTML

document.body.innerHTML += '<button>Click</button>'; // The event listener is lost

5. Các Xem Xét Về Khả Năng Truy Cập và Bảo Mật

Những Điều Cần Lưu Ý

1. Khả năng truy cập: Khi thêm các phần tử một cách động, tăng cường hỗ trợ cho trình đọc màn hình bằng cách sử dụng các thuộc tính ARIA .
2. Bảo mật: Việc sử dụng innerHTML có thể làm tăng nguy cơ XSS (Cross-Site Scripting). Ưu tiên sử dụng appendChild khi có thể.

Giải pháp

Ví dụ: Thêm Thuộc Tính ARIA

var button = document.createElement('button');
button.textContent = 'Submit';
button.setAttribute('aria-label', 'Submit button');
document.body.appendChild(button);

6. Câu Hỏi Thường Gặp (FAQ)

Q1: Tôi có thể thêm nhiều phần tử cùng một lúc bằng appendChild không?

Câu trả lời

Không. appendChild chỉ có thể thêm một nút mỗi lần. Nếu bạn muốn thêm nhiều phần tử cùng lúc, hãy sử dụng DocumentFragment hoặc phương thức append.

Giải pháp 1: Sử dụng DocumentFragment

var parent = document.getElementById('container');
var fragment = document.createDocumentFragment();

for (var i = 0; i < 5; i++) {
    var div = document.createElement('div');
    div.textContent = 'Item ' + (i + 1);
    fragment.appendChild(div);
}

// Append in one operation
parent.appendChild(fragment);

Giải pháp 2: Sử dụng append (đặc tả hiện đại)

var parent = document.getElementById('container');
parent.append('Text', document.createElement('div'));

Q2: Làm thế nào để chỉ thêm văn bản bằng appendChild?

Câu trả lời

Để chỉ thêm văn bản, tạo và thêm một nút văn bản.

Ví dụ Mã

var parent = document.getElementById('container');
var textNode = document.createTextNode('Appended text');
parent.appendChild(textNode);

Điểm Chính

Sử dụng createTextNode cho phép bạn chèn an toàn văn bản thuần mà không có thẻ HTML.

Q3: Nguyên nhân gây lỗi appendChild là gì, và làm sao khắc phục chúng?

Câu trả lời

Các nguyên nhân phổ biến thường thuộc ba danh mục sau.

1. Phần tử cha hoặc con là null

Ví dụ Lỗi:

var parent = document.getElementById('container'); // Element does not exist
parent.appendChild(newElement); // Error occurs

Giải pháp:
Kiểm tra xem phần tử đã tồn tại trước khi thực hiện.

var parent = document.getElementById('container');
if (parent) {
    parent.appendChild(newElement);
}

2. Phần tử con đã được thêm trước đó

Ví dụ Lỗi:

parent.appendChild(child); // First append succeeds
parent.appendChild(child); // Second append causes an error

Giải pháp:
Nếu bạn cần tái sử dụng cùng nội dung, hãy dùng cloneNode().

var clone = child.cloneNode(true);
parent.appendChild(clone);

3. Cố gắng thêm một loại nút không hợp lệ

Ví dụ Lỗi:

parent.appendChild('Text'); // Error

Giải pháp:
Tạo một nút văn bản khi thêm văn bản.

var textNode = document.createTextNode('Text');
parent.appendChild(textNode);

Q4: Tôi nên sử dụng appendChild hay innerHTML?

Câu trả lời

Nếu bạn ưu tiên tính an toàn, hãy sử dụng appendChild.
innerHTML dễ dùng vì nó chèn HTML dưới dạng chuỗi, nhưng có những nhược điểm sau:

1. Rủi ro bảo mật (có thể bị tấn công XSS)
2. Các phần tử và trình nghe sự kiện hiện có có thể bị mất

Ví dụ Được Đề Xuất

var parent = document.getElementById('container');
var newElement = document.createElement('div');
newElement.textContent = 'Safely appended';
parent.appendChild(newElement);

Mặt khác, nếu bạn chỉ cần chèn nội dung tĩnh ngắn, innerHTML vẫn có thể tiện lợi.

Q5: appendChild có hoạt động trên mọi trình duyệt không?

Câu trả lời

Có. appendChild được hỗ trợ bởi hầu hết các trình duyệt, bao gồm cả các trình duyệt cũ.

Tuy nhiên, phương thức append (cung cấp chức năng tương tự) có thể không được hỗ trợ trên các trình duyệt cũ. Nếu tính tương thích quan trọng, appendChild là lựa chọn an toàn hơn.

Câu hỏi 6: Điều gì xảy ra với phần tử gốc nếu tôi sử dụng appendChild trên một phần tử đã tồn tại?

Trả lời

Vì appendChild thực hiện một thao tác di chuyển, phần tử sẽ bị loại bỏ khỏi vị trí ban đầu của nó.

Ví dụ

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var child = document.getElementById('child');

// Move
parent2.appendChild(child);

child được loại bỏ khỏi parent1 và được thêm vào parent2 mới.

Giải pháp:
Nếu bạn muốn giữ một bản sao ở vị trí gốc, hãy sử dụng cloneNode().

var clone = child.cloneNode(true);
parent2.appendChild(clone);

7. Kết luận

Tại sao phương thức JavaScript appendChild lại quan trọng

Trong bài viết này, chúng tôi đã trình bày chi tiết về phương thức JavaScript appendChild, từ cách sử dụng cơ bản đến các ví dụ thực tế, so sánh với các phương thức khác và các câu hỏi thường gặp.

appendChild là một phương thức nền tảng cho việc thao tác DOM trong phát triển web. Nó đóng vai trò thiết yếu trong việc thêm phần tử một cách động và cho phép tương tác người dùng. Nhờ cú pháp đơn giản và khả năng tương thích rộng, nó được sử dụng rộng rãi bởi mọi người, từ người mới bắt đầu đến các nhà phát triển chuyên nghiệp.

Tóm tắt nhanh các điểm chính

1. Cơ bản và cách hoạt động

• Được dùng để thêm một phần tử con mới vào một phần tử cha.
• Bằng cách kết hợp với createElement và createTextNode, bạn có thể thêm phần tử và nút văn bản một cách động.

2. Các trường hợp sử dụng thực tế

• Chúng tôi đã giới thiệu các kịch bản thực tế như thêm các mục danh sách, trường biểu mẫu, hình ảnh và nhiều phần tử cùng lúc.
• Để thêm nhiều phần tử một cách hiệu quả, việc sử dụng DocumentFragment giúp tối ưu hiệu suất.

3. So sánh với các phương thức khác

• insertBefore: Độ linh hoạt để chèn vào vị trí cụ thể.
• append: Có thể thêm văn bản và phần tử cùng nhau (đặc tả mới hơn).
• innerHTML: Dễ sử dụng, nhưng có nhược điểm liên quan đến bảo mật và việc bảo tồn các trình nghe sự kiện.

4. Thực hành tốt

• Hãy cẩn thận khi di chuyển lại các nút. Nếu bạn cần một bản sao, hãy sử dụng cloneNode.
• Sử dụng DocumentFragment để cải thiện hiệu suất.
• Duy trì cấu trúc HTML đúng trong khi cân nhắc bảo mật và khả năng truy cập.

5. Phần Câu hỏi thường gặp

• Chúng tôi đã giải thích các giải pháp cho các câu hỏi thường gặp của người mới bắt đầu, như các lỗi thường gặp, việc thêm nhiều phần tử và chèn văn bản một cách an toàn.

Các bước tiếp theo

Thử áp dụng trong dự án thực tế

Sử dụng các ví dụ mã từ bài viết này, hãy thử triển khai các tính năng thêm phần tử một cách động. Bằng cách áp dụng vào các nút và tương tác biểu mẫu, bạn có thể xây dựng nền tảng vững chắc cho các ứng dụng web tương tác.

Các chủ đề khác để khám phá

Nếu bạn muốn tìm hiểu sâu hơn về thao tác DOM và quản lý sự kiện, các chủ đề sau cũng được đề xuất:

• Bộ lắng nghe sự kiện và xử lý sự kiện : Thêm phản hồi cho hành động của người dùng.
• Làm việc với lớp và ID : Quản lý thuộc tính bằng classList và setAttribute.
• Sử dụng phần tử template : Chèn động các mẫu đã định nghĩa trước.

Lời kết

Phương thức JavaScript appendChild là một trong những công cụ cơ bản và quan trọng nhất để thao tác động các trang web. Hãy sử dụng bài viết này làm tài liệu tham khảo và áp dụng vào các dự án của bạn.

Nếu bạn thấy bài viết hữu ích, hãy chia sẻ nó trên mạng xã hội hoặc để lại phản hồi trong phần bình luận. Tiếp tục nâng cao kỹ năng JavaScript của bạn và chinh phục những thách thức phát triển nâng cao hơn!