Phương thức appendChild

Phương thức appendChild cho phép chèn một phần tử khác vào cuối một phần tử nào đó. Thường được sử dụng nhất sau khi tạo phần tử bằng createElement.

Cú pháp

javascriptphần tử cha.appendChild(phần tử);

Ví dụ

Hãy tạo một đoạn văn, đặt văn bản cho nó và đặt vào trang web ở cuối khối #parent:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Kết quả thực thi mã:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

Ví dụ

Cho một ul. Hãy đặt trong nó 9 thẻ li, đồng thời đặt văn bản của chúng là số thứ tự:

html<ul id="parent"></ul>

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.appendChild(li);
}

Kết quả thực thi mã:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Ví dụ

Hãy điền bảng với các tr và các td:

html<table id="table"></table>

javascriptlet table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tạo một tr
  
  // Điền tr với các td:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // tạo một td
    td.textContent = j; // ghi văn bản vào nó
    
    tr.appendChild(td); // thêm td đã tạo vào cuối tr
  }
  
  table.appendChild(tr); // thêm tr đã tạo vào cuối bảng
}

Kết quả thực thi mã:

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Xem thêm