Javascript добавить фрагмент к существующему элементу HTML

Question

Я создал фрагмент DOM, в который я добавляю несколько дочерних узлов в цикле:

fragment.appendChild( clone )

Я хочу взять этот фрагмент и использовать его для замены существующего элемента HTML, который уже содержит эти узлы.

Я могу использовать

myContainer.appendChild(fragment)

Однако это делается также в цикле, и фрагмент добавляется слишком много раз. Как получить фрагмент, добавить его в myContainer и удалить также старые дочерние элементы myContainer.

Спасибо.

Answer 1

Вы, вероятно, хотите:

while (myContainer.childNodes.length > 0) {
    myContainer.removeChild(myContainer.childNodes[0]);
}

myContainer.appendChild(fragment);

Answer 2

Если я вас правильно понимаю, вы создаете новый узел с несколькими дочерними элементами и хотите, чтобы этот новый узел заменил существующий узел на вашей странице.

Вы можете либо:

• Удалите все дочерние элементы существующего узла и добавьте новые дочерние элементы к существующему узлу.
• Добавьте все дочерние элементы к другому узлу (я думаю, это то, что вы делаете: добавление к fragment)затем удалите существующий узел и добавьте узел в это место.

См. removeChild и appendChild

Answer 3

Не можете ли вы добавить фрагмент после завершения цикла?

Что касается удаления текущих дочерних узлов, вы можете циклически просмотреть их все и использовать функцию removeChild, или вы можете просто установить innerHTML элемента в пустую строку. Если вы сбросите innerHTML до добавления фрагмента, все будет в порядке.

myContainer.innerHTML = "";
myContainer.appendChild(fragment);