我有这个字符串数组 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>
谢谢。
最佳答案
您可以使用 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>
关于javascript - 如何动态创建嵌套元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55311908/