How to create nested elements dynamically?

Question

I have this array of strings var arr = ["ul", "li", "strong", "em", "u"].

How can I make these into DOM Elements one inside another from left to right, first element as the root element. Without using ID because of some reason.

And maybe by using loop for it to be flexible to any number of elements.

var new_element = document.createElement(arr[0]);

I'm expecting something like this:

<ul>
    <li><strong><em><u>Text Here</u></em></strong></li>
</ul>

Thank you.

You want to know about Node.appendChild.

moonwave99
– moonwave99

2019-03-23 08:19:33 +00:00
Commented Mar 23, 2019 at 8:19 — moonwave99
– moonwave99, Commented Mar 23, 2019 at 8:19

Mark · Accepted Answer · 2019-03-23 08:41:31Z

13

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>

answered Mar 23, 2019 at 8:41

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muyie Over a year ago

Great! Works as expected. I'll be analyzing how this works and read about the reduce and reduceRight function. Thank you

Jack Bashford · Accepted Answer · 2019-03-23 08:34:41Z

12

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>

edited Mar 23, 2019 at 8:34

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

answered Mar 23, 2019 at 8:29

dangreen

3393 silver badges11 bronze badges

2 Comments

Muyie Over a year ago

Seems like this is what I am looking for. I'll try to analyze it. And read about .reduce() Thank you btw.

Solomon Ucko Over a year ago

What about => parent.appendChild(document.createElement(elementName));? Node.appendChild returns the appended child. However, readability is probably more important that concision.

zer00ne · Accepted Answer · 2019-03-23 09:14:50Z

createDocumentFragment() and run the array through a loop. On each iteration createElement() and 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'
}

Collectives™ on Stack Overflow

How to create nested elements dynamically?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related