Cách thay thế một phần tử DOM

Với một phần tử DOM, làm cách nào để bạn thay thế nó bằng một phần tử khác?

Giả sử bạn có một phần tử DOM mà bạn có tham chiếu đến (có thể được truy xuất bằng cách sử dụngquerySelector()).

Để thay thế nó bằng một phần tử DOM khác, bạn có thể gọireplaceWith()phương thức trên phần tử đầu tiên, truyền phần tử thứ hai làm đối số:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.replaceWith(el2)

Kể từ Edge <17 và IE11không hỗ trợ nó, bạn nên chuyển nó sang ES5 bằng Babel nếu bạn định hỗ trợ các trình duyệt đó.

Một giải pháp khác là tra cứu phụ huynh và sử dụngreplaceChild(), cũ hơn nhiều và được hỗ trợ bởi tất cả các trình duyệt:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.parentNode.replaceChild(el2, el1)

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt: