如何动态创建嵌套元素？

Question

我有这个字符串数组var arr = ["ul", "li", "strong", "em", "u"]。

我如何才能将它们从左到右在另一个内部变成DOM元素，第一个元素作为根元素。由于某些原因而不使用ID。

也许通过使用循环使其对任意数量的元素都具有灵活性。

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，输出

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>