Блог

Главная - Вопросы по программированию - Элемент в элементе цикла

Элемент в элементе цикла

#javascript

#javascript

Вопрос:

Предположим, у меня есть массив элементов

 const elements = ["div", "p", "a", "span"];

Мне нужен цикл, который будет создавать для меня такие упорядоченные элементы.

 <div>
  <p>
    <a>
      <span></span>
    </a>
  </p>
</div>

К сожалению, я застрял 🙂 Конечно, следующий код не работает.

 const div = document.createElement(elements[0]);
for (let i = 0; i < elements.length; i  ) {
  const el = document.createElement(elements[i]);
  el.appendChild(el);
}

Ответ №1:

Вы можете сначала сохранить ссылку на внешний элемент, затем на каждой итерации внутри цикла переназначать текущий внешний элемент:

 const elements = ["div", "p", "a", "span"];

const div = document.createElement(elements[0]);
let currentOuter = div;
for (let i = 1; i < elements.length; i  ) {
  currentOuter = currentOuter.appendChild(document.createElement(elements[i]));
}
console.log(div.outerHTML);

Более элегантным подходом было бы использовать reduceRight :

 const elements = ["div", "p", "a", "span"];
const div = elements.reduceRight((child, tag) => {
  const parent = document.createElement(tag);
  parent.appendChild(child);
  return parent;
}, document.createTextNode(''));

console.log(div.outerHTML);

Комментарии:

1. Большое спасибо! Я видел, что это будет легко, но у меня было некоторое затмение ума 🙂

Ответ №2:

 const elementNames = ["div", "p", "a", "span"];
let elements = elementNames.map(elementName => document.createElement(elementName));

elements = elements.map((element, index) => ({
  prev: index === 0 ? document.body : elements[index - 1],
  next: element
}))

for (let {
    prev,
    next
  } of elements) {
  prev.appendChild(next);
} 
 div {
  background: yellow;
  padding: 1rem;
}

p {
  background: green;
  padding: 1rem;
}

a {
  background: black;
  padding: 1rem;
}

span {
  background: blue;
  padding: 1rem;
}