JS: Append elements recursively

Issue

can I append a list of elements inside of each other infinitely using JS Vanilla? For example:

let list = ["div","ul","li", "a"...]

results:

<div>
 <ul>
   <li>
    <a>...</a>
   </li>
 </ul>
</div>

Solution

You can use Array#reverse and Array#reduce array methods as follows - in memory - and then append the result to whatever DOM element it needs to be appended to.

const list = ["div","ul","li", "a"],
      theHTML = list.reverse().reduce(
          (acc,el) => `<${el}>${acc}</${el}>`,
      "...");
      //"..." can be replaced with whatever content should be enclosed in the last element
      
      console.log( theHTML );

Answered By - PeterKA