-1
Я хочу построить дерево DOM с использованием объекта JS (классическая тема). Я достиг большую часть работы, но получаю результат, не имеющий смысла: DOM-дерево создается правильно, но все узлы оказываются сглаженными в одной строке, а элемент Input обрезается.Как получить правильный рендеринг моего дерева узлов?
Я очень подозреваю, что функция buildNode работает неправильно, но я не могу найти недостаток.
/**** FILTERS ****/
// TODO : change crappy filter using dictionnary
const attrOnly = (str) => !(str === 'content' || str === 'tag' || str === 'children');
/**** TESTS ****/
const hasChildren = (obj) => obj.hasOwnProperty('children'),
hasContent = (obj) => obj.hasOwnProperty('content');
// TODO: search for namespace given a tag name (SVG)
const findNameSpace = (str) => null;
// Build node with correct attributes and values
const buildNode = function (element, parent) {
const tag = (element.tag || 'div'),
tagAttr = Object.keys(element).filter(attrOnly),
node = document.createElementNS(findNameSpace(tag), tag);
tagAttr.forEach(
(attr) => node.setAttributeNS(findNameSpace(tag), attr, element[attr])
);
hasContent(element) ? node.innerHTML = element.content : null;
return parent.appendChild(node);
}
// Walk along the tree mapping current element with function f.
function walkTree(f, element, parent) {
const current = f(element, parent);
// Reccursively walk children, if necessary
(hasChildren(element) && element.children.forEach(
child => walkTree(f, child, current)
));
};
let tree = {
tag: 'div',
id: 'tree',
children: [{
tag: 'section',
id: 'section-l1-1',
class: 'l1',
content: 'Use <em>me</em> as I am, I am gorgeous!',
children: [{
tag: 'div',
id: 'div-l2',
class: 'l2',
children: [{
tag: 'p',
content: 'Here is a nested paragraph.'
}]
}, {
tag: 'form',
id: 'form-l2',
class: 'l2',
onsubmit: 'alert("Function called!");',
children: [{
tag: 'input',
type: 'text',
id: 'input-l3',
class: 'l3',
value: 'self-closing tag case!'
}]
}]
}, {
tag: 'footer',
id: 'end-page',
class: 'l1',
content: 'This is a running experiment.'
}]
};
walkTree(buildNode, tree, document.getElementById('seed'));#seed div,form,input {
display: block;
}<div id="seed"></div>
Сам код в порядке, вам просто нужно объявить новую строку или добавить строку ''
'', как вы идете к тому же эффекту. – Crowes
Мне не нужно никаких '
' ... Я отредактировал фрагмент и добавил некоторый стиль 'display: block'. Вход по-прежнему скрыт. Похоже, что все узлы конкатенированы или что-то в этом роде. – hsolatges
Если я вручную отредактировал узел формы с помощью инструментов разработчика, появится вход! Какая безумная ошибка ...! – hsolatges