Create multiple divs dynamically and assign id

Question

I am currently trying to create divs dynamically with jquery. I have a function called createDivs that takes an array of x names. I would like to create a div for each name and assign the div the id=”new-name” that was passed in through the array. All dynamically created divs are appended to <div id=”main”></div>. However so far the divs are created but the names are placed in each div. How could I assign a single name per div and append to main?

function createDivs (divName) {
          for (var i=0, len=divName.length; i < len; i++) {
        $('#main').append('div').addClass('new-'+divName)
      }
}

call the function

createDivs(['navBar', 'footer', 'sidePanel', 'socialFeed']);

Current output

<div id="main">
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
<div id="new-" navBar,footer,sidePanel,socialFeed=""></div>
</div>

Desired output

<div id="main">
<div id="navBar"></div> 
<div id="footer"></div> 
<div id="sidePanel"></div>
<div id="socialFeed"></div> 
</div>

Ian Clark · Accepted Answer · 2014-11-16 15:03:58Z

2

Change:

$('#main').append('div').addClass('new-'+divName)

To

var $div = $("<div>", { id: divName[i] });
$('#main').append($div);

answered Nov 16, 2014 at 15:03

Ian Clark

9,3874 gold badges36 silver badges49 bronze badges

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

1 Comment

Code_Ed_Student Over a year ago

This worked perfect. I see what i was doing wrong now. As mentioned above I was assigning the whole array to the div and just the element.

Collectives™ on Stack Overflow

Create multiple divs dynamically and assign id

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related