2

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

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

1 ответ 1

2

Самый простой вариант – сохранить самый первый созданный элемент, например в свойство 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.