Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức
parentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)1 của JavaScript để chèn một tập hợp đối tượngparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)2 hoặc đối tượngparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)3 vào sau nút con cuối cùng của nút chaGiới thiệu về phương thức append() trong JavaScript
Phương thức
<ul id="app"> <li>JavaScript</li> </ul>
Code language: HTML, XML (xml)0 chèn một tập hợp các đối tượngparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)2 hoặc đối tượngparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)3 sau nút con cuối cùng của nút chaparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)Phương thức
parentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)1 sẽ chèn các đối tượngparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)3 dưới dạng các nút<ul id="app"> <li>JavaScript</li> </ul>
Code language: HTML, XML (xml)5Lưu ý rằng một
parentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)3 là một chuỗi UTF-16 ánh xạ trực tiếp tới một chuỗiPhương thức
parentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)1 không có giá trị trả về. Điều đó có nghĩa là phương thứcparentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)1 hoàn toàn trả về<ul id="app"> <li>JavaScript</li> </ul>
Code language: HTML, XML (xml)9Ví dụ về phương thức append() trong JavaScript
Hãy lấy một số ví dụ về việc sử dụng phương pháp
parentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)11) Sử dụng phương thức append() để nối thêm một phần tử ví dụ
Giả sử rằng bạn có phần tử
let app = document.querySelector('#app'); let langs = ['TypeScript','HTML','CSS']; let nodes = langs.map(lang => { let li = document.createElement('li'); li.textContent = lang; return li; }); app.append(...nodes);
Code language: JavaScript (javascript)1 sau<ul id="app"> <li>JavaScript</li> </ul>
Code language: HTML, XML (xml)Ví dụ sau đây cho thấy cách tạo danh sách các phần tử
let app = document.querySelector('#app'); let langs = ['TypeScript','HTML','CSS']; let nodes = langs.map(lang => { let li = document.createElement('li'); li.textContent = lang; return li; }); app.append(...nodes);
Code language: JavaScript (javascript)2 và nối chúng vào phần tửlet app = document.querySelector('#app'); let langs = ['TypeScript','HTML','CSS']; let nodes = langs.map(lang => { let li = document.createElement('li'); li.textContent = lang; return li; }); app.append(...nodes);
Code language: JavaScript (javascript)1Khi bạn gọi phương thức appendChild(), nó sẽ thêm các phần tử mới được tạo vào sau phần tử con cuối cùng bên trong phần tử cha
Tương tự như phương thức append()
________số 8Nhưng có một số điểm khác biệt chính giữa phương thức append() và appendChild()
dùng thử
Xem Pen appendChild() JavaScript #1 của SoftAuthor (@softauthor) trên CodePen
2. Thêm nhiều phần tử con làm anh chị em
Không giống như phương thức append(), appendChild() chỉ cho phép bạn thêm một phần tử vào một truy vấn duy nhất
Nếu bạn muốn thêm nhiều phần tử con hơn cho cùng một phần tử cha, bạn sẽ cần gọi lại phần tử đó với một phần tử mới làm đối số
const boxWrapper = document.getElementById("box-wrapper"); const box5 = document.createElement("div"); box5.innerHTML = 'div <br> 5'; box5.style.backgroundColor = "orange"; box5.classList.add("box"); const box6 = document.createElement("div"); box6.innerHTML = 'div <br> 6'; box6.style.backgroundColor = "orange"; box6.classList.add("box"); boxWrapper.appendChild(box5); boxWrapper.appendChild(box6);3. Thêm các phần tử con lồng nhau bên trong phần tử kia
Sử dụng appendChild(), chúng ta có thể dễ dàng thêm một phần tử bên trong một phần tử khác bằng cách xâu chuỗi các phương thức appendChild()
Không giống như phương thức append(), phương thức appendChild() trả về phần tử được nối thêm
Như bạn có thể thấy, tôi đã gọi phương thức appendChild() trên đối tượng boxWrapper
Đối số là đối tượng. gán () là một trong những cách dễ nhất để xâu chuỗi appendChild () để thêm các phần tử con lồng nhau
Phải mất hai đối số
- Phần tử mà bạn muốn tạo, như div hoặc nút
- Đối tượng JavaScript nơi bạn sẽ thêm một hoặc nhiều thuộc tính cho phần tử
parentNode.append(...nodes); parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)0Ở đây mình thêm phần tử div đầu tiên là ô số 5
Sau đó, tôi đã xâu chuỗi phương thức appendChild() để thêm một phần tử con bên trong phần tử hộp 5 là nút