Функция для создания вложенных HTML-блоков

01 ноября 2021, 01:00

Хотелось сделать красивую функцию, чтобы можно было одной "цепочкой" вызовов создать и вернуть вложенные 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 передать что-то покороче.

(можно было сделать одну функцию с аргументом-массивом, но тут в том числе и спортивный интерес).

Answer 1

Самый простой вариант – сохранить самый первый созданный элемент, например в свойство root:

let html = nestHTML('div', 111)('div', 222)('div', 333, 'moo')('div', 444); 
test.appendChild(html.root); 
 
 
function nestHTML(tag, textContent, className) { 
  function nested(tag, textContent, className) { 
    let elem = document.createElement(tag); 
 
    elem.textContent = textContent || ""; 
    elem.className = className || ""; 
 
    if (nested.parent) { 
      nested.parent.appendChild(elem); 
      nested.parent = elem; 
    } else { 
      nested.parent = elem; 
    } 
 
    return nested; 
  } 
  nested.root = nested(tag, textContent, className).parent; 
  return nested; 
}

section div { 
  border: 2px solid orange; 
  padding: 5px; 
} 
 
.moo { 
  border-color: red; 
}

<section id="test"></section>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

javascript

Лучший способ как можно найти key обьекта и получить его значения в переборе массива

У меня есть массив

Функция для создания вложенных HTML-блоков

Подсветить label при нажатии

Переключение класса при клике

Пытаюсь сделать 'Пятнашки' столкнулся с проблемой

Лучший способ как можно найти key обьекта и получить его значения в переборе массива