В DocumentFragment: не удалось выполнить «insertAdjacentHTML» для «Элемент»: элемент не имеет родителя

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

Пример: (ошибка сделана намеренно)

var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));

// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);

// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');

fragment.removeChild(temporaryElement);

Я ясно вижу, что для временного элемента существует parentNode, так почему же я получаю эту ошибку?


javascript html documentfragment html5-template
person KevBot    schedule 27.02.2017    source источник
comment
Родительский узел имеет тип Node.DOCUMENT_FRAGMENT_NODE (консоль показывает 11, что соответствует этой константе), что, по-видимому, не является допустимым родителем для запуска insertAdjacentHTML. См. также таблицу совместимости браузеров MDN, где показано что методы ParentNode недоступны во всех браузерах...   -  person Heretic Monkey    schedule 27.02.2017
comment
вы можете добавить еще один фрагмент, чтобы потом ничего не удалять. см. stackoverflow.com/questions /9284117/ для удобного помощника   -  person dandavis    schedule 27.02.2017

Ответы (2)


arrow_upward
5
arrow_downward

Ты сможешь:

  1. Создайте элемент <template>,
  2. Добавьте строковое содержимое через его свойство innerHTML,
  3. Получите DocumentFragment из его свойства content.

//Use a template
var template = document.createElement( 'template' )
template.innerHTML = '<td>Hello<td>World'

//Get the document fragment
var fragment = template.content
Row.appendChild( fragment )
<table>
  <tr id=Row></tr>
</table>

person Supersharp    schedule 01.03.2017
comment
Я ценю, что вы решили проблему добавления элементов, которым нужны определенные родительские теги (td). В конце концов я пошел по этому пути, но поскольку теги шаблонов не поддерживаются в IE11, мне пришлось сделать несколько запасных вариантов. Спасибо за помощь! Если вам интересно, это что я закончил с - person KevBot; 01.03.2017

arrow_upward
0
arrow_downward

Так что я почти уверен, что вы хотите получить проанализированный div, верно? Чтобы сделать это, вы бы сделали это.

var fragment = document.createElement("div");
fragment.innerHTML = "Some crazy custom HTML..";

//This will output exactly what your code should do
console.log(fragment);

person Mason Wright    schedule 27.02.2017
comment
Хорошая идея, но это не сработает, если HTML <td>Data</td>. Div удалит теги и оставит вам только текстовый узел: "Data". Вот почему его нужно размещать непосредственно внутри фрагмента. - person KevBot; 27.02.2017
comment
@KevBot Тогда я бы попробовал document.createElement с td, а затем appendChild их к фрагменту - person Mason Wright; 27.02.2017