Как удалить все дочерние элементы DOM узла в JavaScript

Оффтоп javascript
1

Мне нужно очистить содержимое DOM элемента от всех вложенных элементов в JavaScript. Как это правильно сделать?

Допустим, у меня есть такая HTML разметка:

<div id="container">
    <p>первый абзац</p>
    <span>какой-то текст</span>
    <ul><li>элемент списка</li></ul>
</div>

Я получаю ссылку на элемент так:

var targetElement = document.getElementById("container");

Мне нужно удалить все дочерние элементы, чтобы остался только пустой <div id="container"></div>.

Можно ли просто присвоить пустой массив:

targetElement.childNodes = [];

Или лучше использовать методы типа removeChild? Какой способ самый правильный для чистого JavaScript? Буду благодарен также за решение с использованием jQuery.

2

Самый быстрый способ — targetElement.textContent = ''. innerHTML тоже работает, но textContent производительнее и безопаснее. Есть ещё targetElement.replaceChildren() — современный метод, но в старых браузерах работает плохо. В jQuery просто $('#container').empty(). Сам использую textContent в 90% случаев.

3

Используй targetElement.innerHTML = '' — это проще всего. Твой код с массивом не работает, потому что childNodes нельзя менять напрямую. removeChild тоже так себе вариант. Этот способ работает во всех браузерах.

4

Я использую цикл с removeChild, когда нужно именно удалить элементы: while(targetElement.firstChild) { targetElement.removeChild(targetElement.firstChild); } Код длиннее innerHTML, но правильно очищает все обработчики событий. innerHTML оставляет “мусор” в памяти, если у дочерних элементов были события. Для простых случаев innerHTML норм, но с динамическим контентом лучше перестраховаться.