如何動態創建嵌套元素？

Question

我有這個字符串數組var arr = ["ul", "li", "strong", "em", "u"] 。

如何將這些元素從左到右一個進入另一個內部，第一個元素作為根元素。 由於某種原因沒有使用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,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' }