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

Question

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

fragment.appendChild(clone) 

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

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

myContainer.appendChild(fragment) 

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

спасибо.

Answer 1

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

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

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

Answer 2

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

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

myContainer.appendChild(fragment); 

Answer 3

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

Вы можете:

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

См removeChild и appendChild