Mrthdrb

Proving a function is onto where f(x)=|x|.

Engineer refusing to file/disclose patents

Can somebody explain Brexit in a few child-proof sentences?

Have I saved too much for retirement so far?

Drawing a topological "handle" with Tikz

MAXDOP Settings for SQL Server 2014

How to decide convergence of Integrals

Can a Necromancer reuse the corpses left behind from slain undead?

Create all possible words using a set or letters

Can I use my Chinese passport to enter China after I acquired another citizenship?

Folder comparison

Translation of Scottish 16th century church stained glass

How much character growth crosses the line into breaking the character

Can I sign legal documents with a smiley face?

Two-sided logarithm inequality

How will losing mobility of one hand affect my career as a programmer?

Global amount of publications over time

How do I repair my stair bannister?

Is Asuka Langley-Soryu disgusted by Shinji?

Some numbers are more equivalent than others

Could the E-bike drivetrain wear down till needing replacement after 400 km?

When quoting, must I also copy hyphens used to divide words that continue on the next line?

Has Darkwing Duck ever met Scrooge McDuck?

Varistor? Purpose and principle

Creating nested elements dynamically

Create GUID / UUID in JavaScript?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Event binding on dynamically created elements?Retrieve the position (X,Y) of an HTML elementHow do I find out which DOM element has the focus?Creating a div element in jQueryHow to move an element into another element?How do I remove a particular element from an array in JavaScript?jQuery scroll to element

9

1

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.

javascript html dom

share|improve this question

edited yesterday

Community♦

11

asked yesterday

MuyieMuyie

728

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You want to know about Node.appendChild.
  
  – moonwave99
  yesterday
  

  
  
  
  

add a comment | 

9

1

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.

javascript html dom

share|improve this question

edited yesterday

Community♦

11

asked yesterday

MuyieMuyie

728

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You want to know about Node.appendChild.
  
  – moonwave99
  yesterday
  

  
  
  
  

add a comment | 

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.

javascript html dom

share|improve this question

edited yesterday

Community♦

11

asked yesterday

MuyieMuyie

728

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

share|improve this question

edited yesterday

Community♦

11

asked yesterday

MuyieMuyie

728

share|improve this question

edited yesterday

Community♦

11

asked yesterday

MuyieMuyie

728

edited yesterday

Community♦

11

edited yesterday

Community♦

11

asked yesterday

MuyieMuyie

728

asked yesterday

MuyieMuyie

728

3 Answers
3

active

oldest

votes

7

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>

share|improve this answer

answered yesterday

Mark MeyerMark Meyer

39.5k33162

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

11

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>

share|improve this answer

edited yesterday

Jack Bashford

13k31847

answered yesterday

dangreendangreen

1498

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

0

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'

share|improve this answer

answered yesterday

zer00nezer00ne

25k32545

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311908%2fcreating-nested-elements-dynamically%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

7

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>

share|improve this answer

answered yesterday

Mark MeyerMark Meyer

39.5k33162

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

7

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>

share|improve this answer

answered yesterday

Mark MeyerMark Meyer

39.5k33162

• 
  
  
  

  
  1
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

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>

share|improve this answer

answered yesterday

Mark MeyerMark Meyer

39.5k33162

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"]

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"]

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 = []

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>

share|improve this answer

answered yesterday

Mark MeyerMark Meyer

39.5k33162

answered yesterday

Mark MeyerMark Meyer

39.5k33162

answered yesterday

Mark MeyerMark Meyer

39.5k33162

11

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>

share|improve this answer

edited yesterday

Jack Bashford

13k31847

answered yesterday

dangreendangreen

1498

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

11

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>

share|improve this answer

edited yesterday

Jack Bashford

13k31847

answered yesterday

dangreendangreen

1498

• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

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

  
  
  
  

add a comment | 

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>

share|improve this answer

edited yesterday

Jack Bashford

13k31847

answered yesterday

dangreendangreen

1498

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>

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>

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>

share|improve this answer

edited yesterday

Jack Bashford

13k31847

answered yesterday

dangreendangreen

1498

edited yesterday

Jack Bashford

13k31847

edited yesterday

Jack Bashford

13k31847

answered yesterday

dangreendangreen

1498

answered yesterday

dangreendangreen

1498

0

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'

share|improve this answer

answered yesterday

zer00nezer00ne

25k32545

add a comment | 

0

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'

share|improve this answer

answered yesterday

zer00nezer00ne

25k32545

add a comment | 

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'

share|improve this answer

answered yesterday

zer00nezer00ne

25k32545

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'

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'

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'

share|improve this answer

answered yesterday

zer00nezer00ne

25k32545

answered yesterday

zer00nezer00ne

25k32545

answered yesterday

zer00nezer00ne

25k32545