#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
andid
. Поскольку объект<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);
};