Bạn có thể thêm vào div trong JavaScript không?

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);
 Nội dung chính Show
 
Giới thiệu về phương thức append() trong JavaScript
Ví dụ về phương thức append() trong JavaScript
1) Sử dụng phương thức append() để nối thêm một phần tử ví dụ
dùng thử
2. Thêm nhiều phần tử con làm anh chị em
3. Thêm các phần tử con lồng nhau bên trong phần tử kia
Bạn có thể thêm div vào div không?
Có append trong JavaScript không?
Bạn có thể đặt văn bản trong div không?
Tôi có thể sử dụng cái gì thay vì nối thêm vào JavaScript?
 
Code language: JavaScript (javascript)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

Giớ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)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

Phương thức

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

<ul id="app">
    <li>JavaScript</li>
</ul>
Code language: HTML, XML (xml)

Lưu ý rằng một

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

Phương thức

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

parentNode.append(...nodes);
parentNode.append(...DOMStrings);
Code language: JavaScript (javascript)

<ul id="app">
    <li>JavaScript</li>
</ul>
Code language: HTML, XML (xml)

Ví 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)

1) 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)

<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)

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)

Khi 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()

Như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ố

1. Phần tử mà bạn muốn tạo, như div hoặc nút
2. Đố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)

Ở đâ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

Bạn có thể thêm div vào div không?

Có append trong JavaScript không?

Bạn có thể đặt văn bản trong div không?

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