Hcfyk

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>

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>

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'