Хотелось сделать красивую функцию, чтобы можно было одной "цепочкой" вызовов создать и вернуть вложенные HTML-элементы.
Вызовы функций получились (и вставки работают как надо), а вот как, в самом конце вызовов, сразу вернуть самый первый созданный элемент - вопрос.
Получается такой ужОс:
let html = nestHTML('div', 111)('div', 222)('div', 333, 'moo')('div', 444);
test.appendChild( html.bubu.parentNode.parentNode.parentNode );
function nestHTML(tag, textContent, className) {
let elem = document.createElement(tag);
elem.textContent = textContent || "";
elem.className = className || "";
if( nestHTML.bubu ){
nestHTML.bubu.appendChild(elem);
nestHTML.bubu = elem;
} else {
nestHTML.bubu = elem;
}
return nestHTML;
}
section div {
border: 2px solid orange;
padding: 5px;
}
.moo {
border-color: red;
}
<section id="test"></section>
А хотелось бы в главный appendChild передать что-то покороче.
(можно было сделать одну функцию с аргументом-массивом, но тут в том числе и спортивный интерес).