JavaScript create dynamically HTML section

Question

Hi I am trying to create programmatically the following HTML section in a specific div, by inserting the Dropdown name and Drop Item. Thank you for any help.

<ul class="nav">
        <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">Dropdown 1</a>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">Drop Item 1</a>
            </li>
        </ul>
    </li>
</ul>

In simple, I would like to create 1 or 2 methods which accepts 2 strings, 1 for the Dropdown and the other for the Drop Item

$('yourHtmlStringHere').appendTo('#targetElement')

Rory McCrossan
– Rory McCrossan

2016-08-16 10:50:41 +00:00
Commented Aug 16, 2016 at 10:50 — Rory McCrossan
– Rory McCrossan, Commented Aug 16, 2016 at 10:50

Nihar Sarkar · Accepted Answer · 2016-08-16 10:50:54Z

1

try this:

var str='<ul class="nav"><li class="button-dropdown">';
          str+=  '<a href="javascript:void(0)" class="dropdown-toggle">Dropdown 1</a>';
             str+= '<ul class="dropdown-menu"><li><a href="#">Drop Item 1</a></li></ul></li></ul>';

$('#div-id').html(str);

div-id is your specific div ID .

answered Aug 16, 2016 at 10:50

Nihar Sarkar

1,2991 gold badge15 silver badges26 bronze badges

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

Comments

H.C · Accepted Answer · 2016-08-16 11:59:45Z

1

as @Nihar Sarkar pointed but with the function with the two strings

function updateList(Dropdown1,DropItem1List){

    var ListOfItems = '';

    for(var i=0; i<DropItem1List.length;i++){
        ListOfItems +=  '<li><a href="#">'+DropItem1List[i]+'</a></li>';
    }

    var htmlCode = '<ul class="nav">'
            +'<li class="button-dropdown">'
                +'<a href="javascript:void(0)" class="dropdown-toggle">'+Dropdown1+'</a>'
                +'<ul class="dropdown-menu">'
                    +ListOfItems
            +'</ul>'
        +'</li>'
    +'</ul>';

    $('#yourDivId').html(htmlCode);

}

or if the html already exists in your page

$('#yourDivId .nav .button-dropdown a.dropdown-toggle').text(Dropdown1);
$('#yourDivId .nav .button-dropdown ul.dropdown-menu').text(DropItem1);

edited Aug 16, 2016 at 11:59

answered Aug 16, 2016 at 11:02

H.C

6181 gold badge10 silver badges30 bronze badges

7 Comments

Doro Over a year ago

Thank you for the reply. What if I would like to append, for example if I keep press the new will be added? Also, there is a way to add multiple DropItem, fr example in a loop?

H.C Over a year ago

try the new version of code to add multiple DropItem haven't tested but it should work

H.C Over a year ago

$('#yourDivId .nav .button-dropdown ul.dropdown-menu').append('<li><a href="#">'+Item+'</a></li>'); to add one single item to the list

Doro Over a year ago

It works but I can only see only the Dropdown1, DropItem1List is not visible.

H.C Over a year ago

DropItem1List will be a array of strings you want as options of the list for example var DropItem1List =['option1','option2','option3'];

|

Collectives™ on Stack Overflow

JavaScript create dynamically HTML section

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related