How to create nested elements dynamically?

You can do this with reduceRight() which avoids needing to query the result to get the deepest value because it starts with the deepest element and works out. The return value will be the topmost element:

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>

It also fails gracefully with an empty array:

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>

You can use Array.prototype.reduce and 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>

Tags:

Javascript

Html

Dom

Recent Posts