Как через цикл вложить элементы DOM один в другой?

Question

[t256e]

я чет туплю и не могу понять как это сделать?


то есть нужно чтоб внутри .main лежал div, внутри которого был p, внутри которого был span. У меня сейчас все на одном ровне получается

Answer 1

[RAX7]

var arr = ['div', 'p', 'span'];
var main = document.querySelector('.main');

for (let i = 0, container = main; i < arr.length; i++) {
  let el = document.createElement(arr[i]);
  container.append(el);
  container = el;
}

Answer 2

[0xD34F]

Перебираем массив от конца к началу:

main.innerHTML = arr.reduceRight((content, tag) => `<${tag}>${content}</${tag}>`, '');

// или

main.append(arr.reduceRight((content, tag) => {
  const el = document.createElement(tag);
  el.append(content);
  return el;
}, ''));

И наоборот:

main.insertAdjacentHTML('beforeend', (function next(i) {
  return arr[i] ? `<${arr[i]}>${next(-~i)}</${arr[i]}>` : '';
})(0));

// или

arr.forEach(function(tag) {
  this[0].appendChild(document.createElement(tag));
  this[0] = this[0].lastChild;
}, [ main ]);

Answer 3

[Сергей Соколов]

Можно изнутри наружу идти:
создавать очередной элемент и вкладывать в него предыдущий.