How to create nested elements dynamically? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Create GUID / UUID in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?Event binding on dynamically created elements?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How to check whether a checkbox is checked in jQuery?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

License to disallow distribution in closed source software, but allow exceptions made by owner?

What is the difference between CTSS and ITS?

Sally's older brother

"klopfte jemand" or "jemand klopfte"?

Is there hard evidence that the grant peer review system performs significantly better than random?

Is multiple magic items in one inherently imbalanced?

Putting class ranking in CV, but against dept guidelines

Random body shuffle every night—can we still function?

Project Euler #1 in C++

How does Belgium enforce obligatory attendance in elections?

What does this say in Elvish?

The test team as an enemy of development? And how can this be avoided?

Did any compiler fully use 80-bit floating point?

Converted a Scalar function to a TVF function for parallel execution-Still running in Serial mode

Manga where all the characters were human/animal hybrids

Can two person see the same photon?

Does the Mueller report show a conspiracy between Russia and the Trump Campaign?

Is there public access to the Meteor Crater in Arizona?

What's the easiest way to combine specific columns of two matrices?

How to write capital alpha?

Is CEO the "profession" with the most psychopaths?

Why is it faster to reheat something than it is to cook it?

What makes a man succeed?

Fit (vertically portrayed) image with the caption displayed below



How to create nested elements dynamically?



Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Create GUID / UUID in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?Event binding on dynamically created elements?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How to check whether a checkbox is checked in jQuery?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








11















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



















  • 2





    You want to know about Node.appendChild.

    – moonwave99
    Mar 23 at 8:19

















11















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



















  • 2





    You want to know about Node.appendChild.

    – moonwave99
    Mar 23 at 8:19













11












11








11


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
















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




javascript html dom






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 9 hours ago









Ajay Kumar Ganesh

1,63911629




1,63911629










asked Mar 23 at 8:16









MuyieMuyie

899




899







  • 2





    You want to know about Node.appendChild.

    – moonwave99
    Mar 23 at 8:19












  • 2





    You want to know about Node.appendChild.

    – moonwave99
    Mar 23 at 8:19







2




2





You want to know about Node.appendChild.

– moonwave99
Mar 23 at 8:19





You want to know about Node.appendChild.

– moonwave99
Mar 23 at 8:19












3 Answers
3






active

oldest

votes


















9














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


















  • 1





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

    – Muyie
    Mar 23 at 8:49


















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>








share|improve this answer

























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

    – Muyie
    Mar 23 at 8:43











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

    – Solomon Ucko
    Mar 23 at 14:20


















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























    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


















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

    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    9














    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


















    • 1





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

      – Muyie
      Mar 23 at 8:49















    9














    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


















    • 1





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

      – Muyie
      Mar 23 at 8:49













    9












    9








    9







    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













    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>








    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












    share|improve this answer



    share|improve this answer










    answered Mar 23 at 8:41









    Mark MeyerMark Meyer

    41.8k33665




    41.8k33665







    • 1





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

      – Muyie
      Mar 23 at 8:49












    • 1





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

      – Muyie
      Mar 23 at 8:49







    1




    1





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

    – Muyie
    Mar 23 at 8:49





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

    – Muyie
    Mar 23 at 8:49













    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>








    share|improve this answer

























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

      – Muyie
      Mar 23 at 8:43











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

      – Solomon Ucko
      Mar 23 at 14:20















    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>








    share|improve this answer

























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

      – Muyie
      Mar 23 at 8:43











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

      – Solomon Ucko
      Mar 23 at 14:20













    12












    12








    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>








    share|improve this answer















    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>








    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














    share|improve this answer



    share|improve this answer








    edited Mar 23 at 8:34









    Jack Bashford

    17.8k51949




    17.8k51949










    answered Mar 23 at 8:29









    dangreendangreen

    1598




    1598












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

      – Muyie
      Mar 23 at 8:43











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

      – Solomon Ucko
      Mar 23 at 14:20

















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

      – Muyie
      Mar 23 at 8:43











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

      – Solomon Ucko
      Mar 23 at 14:20
















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

    – Muyie
    Mar 23 at 8:43





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

    – Muyie
    Mar 23 at 8:43













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

    – Solomon Ucko
    Mar 23 at 14:20





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

    – Solomon Ucko
    Mar 23 at 14:20











    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



























      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

























        0












        0








        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













        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'








        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












        share|improve this answer



        share|improve this answer










        answered Mar 23 at 9:14









        zer00nezer00ne

        25.8k32547




        25.8k32547



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














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

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Bruad Bilen | Luke uk diar | NawigatsjuunCommonskategorii: BruadCommonskategorii: RunstükenWikiquote: Bruad

            Image
            Öömrang ArtiikelKultuurIidj an drankHoonwerk ualhuuchsjiiskualgermaanskurnweederkwegelssees Wikiquote: Bruad (function()var node=document.getElementById("mw-dismissablenotice-anonplace");if(node)node.outerHTML="u003Cdiv class="mw-dismissable-notice"u003Eu003Cdiv class="mw-dismissable-notice-close"u003E[u003Ca tabindex="0" role="button"u003EFersteegu003C/au003E]u003C/divu003Eu003Cdiv class="mw-dismissable-notice-body"u003Eu003Cdiv id="localNotice" lang="frr" dir="ltr"u003Eu003Cdiv id="sitenotice"u003Enu003Ccenteru003Enu003Ctable class="rahmenfarbe4" style="border-style: solid; border-width: thin; width: 70%;"u003Ennu003Ctbodyu003Eu003Ctru003Enu003Ctd style="text-align:center;"u003Eu003Ca href="/wiki/Datei:Nordfriesischeflagge.svg" class="image"u003Eu003Cimg alt="Nordfriesischeflagge.svg" src="//upload.wikimedia.or...
            Read more

            Modern approach to radio buttons

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0; } 22 4 I am working on updating the UI/UX of a 20-year-old application and I seem to be stuck at this particular use case. On clicking on the New button, the system asks the user to choose one of two options Create New Work Order Create a new Task/Subtask for a pre-existing Work Order Keep in mind that the system does ask for more information. It's not just this and based on the architecture of the application, it needs to know this (and some other) information before proceeding further. My question is, what would be a modern way of showing the two choices to the user? Could it be one of the options mentioned in the screenshot below? The old application screen ...
            Read more

            How were these pictures of spacecraft wind tunnel testing taken?

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0; } .everyonelovesstackoverflow{position:absolute;height:1px;width:1px;opacity:0;top:0;left:0;pointer-events:none;} 28 2 $begingroup$ The picture below from this answer shows four spacecraft wind tunnel tests from the 1950s. In addition to the test object, the bow shock and turbulence are clearly visible. How is this visualization accomplished? Is the medium air, or a denser fluid such as water? Is there a pigment added to the fluid to help visualization? Is there special lighting, such as polarized light? Any notable camera tricks? Is the 3-D nature of the test object more significant than being a thick 2-D object? ...
            Read more