Блог

Главная - Вопросы по программированию - Дочернее приложение к документу.createDocumentFragment

Дочернее приложение к документу.createDocumentFragment

#javascript

#javascript

Вопрос:

У меня есть следующий код, в котором я пытаюсь добавить вложенный html-компонент к html-элементу

 var docFrag = document.createDocumentFragment();
var count = 0;

arr.map(function(obj){
    count  ;
    var title = obj.title;
    var codeAttr = obj.code;
    var htmlComponent = "<div class='line_h'><div class='floatRadio'><label for='radio_" count "'><input name='radio' value='" codeAttr "' id='radio_" count "' checked='checked' type='radio' class='inputRadio' /><span class='fld_lbl'>" title "</span></label></div></div>";

    console.log(htmlComponent);
    docFrag.appendChild(htmlComponent);
})

Он выполняет итерацию по массиву объектов, откуда я получаю содержимое для добавления в htmlComponent . Однако при выполнении docFrag.appendChild(htmlComponent) он возвращает ошибку:

Не удалось выполнить ‘appendChild’ на ‘Node’: параметр 1 не имеет типа ‘Node’.

Действительно, я передаю строку… как я могу создать вложенный html-компонент и передать его docFrag ?

Комментарии:

1. Я просто хочу отметить, что вы можете полностью удалить свою count переменную и удалить атрибуты for and id . Поскольку объект <input> находится внутри <label> , нет необходимости указывать принадлежность к нему.

2. Это не тот способ Array.prototype.map() , который предназначен для использования. Для вас проблема: создайте полную строку, а затем используйте Element.insertAdjacentHTML()

3. @Andreas. хорошо — что не так с этой реализацией arr.prototype.map ? Затем я использую createDocumentFragment для хранения htmlкомпонентов, созданных во время итерации, которые затем я вставлю в свое дерево DOM

4. » map() Метод создает новый массив с результатами вызова предоставленной функции для каждого элемента в этом массиве. «. Метод используется для преобразования значений массива. Это должен быть простой старый цикл или, по крайней мере, Array.prototype.forEach()

Ответ №1:

Сначала вы должны преобразовать свою строку в узлы. Используйте эту функцию:

 function htmlToNodes(html, elementsOnly){
  if(typeof html != 'string') throw new Error('Argument must be a string');
  const template = document.createElement('template');
  template.innerHTML = html.trim();
  return elementsOnly ? template.content.children : template.content.childNodes;
}

а затем замените docFrag.appendChild(htmlComponent); на:

   htmlToNodes(htmlComponent).forEach((n)=>{
    docFrag.appendChild(n);
  };