时间戳

首页 > 解决方案 > 如何动态创建嵌套元素？

javascript - 如何动态创建嵌套元素？

问题描述

我有这个字符串数组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>

谢谢你。

标签： javascripthtmldom

解决方案

您可以这样做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>

推荐阅读