Как динамически создавать вложенные элементы?

Question

У меня есть этот массив строк var arr = ["ul", "li", "strong", "em", "u"].

Как я могу превратить их в элементы DOM один внутри другого слева направо, первый элемент в качестве корневого элемента. Без использования идентификатора по какой-то причине.

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

var new_element = document.createElement(arr[0]);

Я ожидаю что-то вроде этого:

<ul>
    <li><strong><em><u>Text Here</u></em></strong></li>
</ul>

Спасибо.

Answer 1

Вы можете использовать Array.prototype.reduce и Node.prototype.appendChild.

https://jsbin.com/hizetekato/edit?html,js,output

var arr = ["ul", "li", "strong", "em", "u"];

function createChildren(mount, arr) {
  return arr.reduce((parent, elementName, i) => {
    const element = document.createElement(elementName);
    parent.appendChild(element);
    return element;
  }, mount);
}

const deepest = createChildren(document.querySelector('#root'), arr);

deepest.innerText = 'WebDevNSK'

<div id="root"></div>

Answer 2

Вы можете сделать это с помощью reduceRight(), что исключает необходимость запрашивать результат, чтобы получить самое глубокое значение, потому что оно начинается с самого глубокого элемента и работает.Возвращаемое значение будет самым верхним элементом:

var arr = ["ul", "li", "strong", "em", "u"]

let el = arr.reduceRight((el, n) => {
  let d = document.createElement(n)
  d.appendChild(el)
  return d
}, document.createTextNode("Text Here"))

document.getElementById('container').appendChild(el)

<div id = "container"></div>

Также изящно происходит сбой с пустым массивом:

var arr = []

let el = arr.reduceRight((el, n) => {
  let d = document.createElement(n)
  d.appendChild(el)
  return d
}, document.createTextNode("Text Here"))

document.getElementById('container').appendChild(el)

<div id = "container"></div>

Answer 3

createDocumentFragment() и запустить массив через цикл. На каждой итерации createElement() и appendChild()

const frag = document.createDocumentFragment();
const useless = ["ul", "li", "strong", "em", "u"];

let previous;
for (let u = 0; u < useless.length; u++) {
  const current = document.createElement(useless[u]);
  if (u === 0) {
    frag.appendChild(current);
  } else {
    previous.appendChild(current);
  }
  previous = current;
}

document.body.appendChild(frag);

ul {
  outline: 5px dashed green;
  padding: 15px;
}

li {
  outline: 5px solid blue;
  padding: 12px;
}

strong {
  outline: 5px dashed red;
  padding: 9px
}

em {
  outline: 5px dashed grey;
  padding: 6px
}

u {
  outline: 5px solid black;
  padding: 3px;
}

u::before {
  content: 'THIS TEXT SHOULD BE UNDERLINED'
}