insertAdjacentElement не принимает фрагмент документа

Question

Я пытаюсь выполнить ниже фрагмент

let frag = document.createDocumentFragment();
let divElement = document.createElement('div');
    divElement.insertAdjacentElement('afterend', frag);

Я получаю приведенную ниже ошибку.

Uncaught TypeError: Не удалось выполнить «insertAdjacentElement» для «Element»: параметр 2 не относится к типу «Element» '.

Какое здесь ограничение? Ссылка на детали ошибки будет принята с благодарностью. Пожалуйста, предложите альтернативу, чтобы сделать это эффективно.

Answer 1

createDocumentFragment никогда не является частью основного домена. В дереве dom document fragment заменяется его дочерним элементом. Также он не может наследовать от элемента базового класса. Так что это тоже недопустимый элемент. Синтаксис insertAdjacentElement равен targetElement.insertAdjacentElement(position, element), где элемент должен быть допустимым, как описано выше по ссылке.

Отсюда и эта ошибка

Answer 2

Фрагменты могут состоять из нескольких элементов, а не только отдельных элементов. В таком случае, если техника вашего вопроса сработала, insertAdjacentElement будет вставлять несколько элементов, а не только один элемент. (Это не называется insertAdjacentElements)

Это просто запрещено. В отличие от appendChild, insertAdjacentElement не может принимать фрагмент в качестве аргумента.

Вы можете перебрать все дочерние фрагменты и вставить их afterend:

// Create fragment, append elements
const fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('span')).textContent = 'span';

// Iterate through fragment
for (const element of fragment.children) {
  divElement.insertAdjacentElement('afterend', element);
}

<div id="divElement"></div>

Или вы можете вызвать insertAdjacentElement напрямую, вместо того, чтобы сначала поместить элементы во фрагмент.