CODEWITHSUNDEEP
javascriptjqueryhtml
nmac
nmac

Reputation: 680

Dynamic html generation div id trouble

So I am building this feature that dynamically outputs a new "panel" (some piece of html). The issue, however, is that the newly created div lacks an id, despite me explicitly assigning it one. The id is supposed to be a name with a number that increments on each generation of a new div (name1, name2, etc.). But I cannot get the div to accept the id that I am assigning it. 

//add panel
  var i = 1; 
        $('#panel').click(function() { 
        $('body').append("<div id='photoContent" + i + "'><h1> Panel </h1><div id='showTable'><h2>add image</h2><div id='table'></div></div></div>").css({
            'margin' : '0px', 
            'padding' : '0px',
            'height' : height, 
            'width' : width,
            'background-color' : 'yellow', 
            'color' : 'rgba(192, 192, 192, .9)',
            'font-family' : 'sans-serif', 
            'font-size' : '40px',
            'text-align' : 'center',
            'border' : '2px solid rgba(192, 192, 192, 1)',
            'border-left-style' : 'none',
            'border-right-style' : 'none'
        }); //close css object literal; 
i++; }); //end click function

Any help would be appreciated.

Upvotes: 0

Views: 117

Answers (1)

Jonast92
Jonast92

Reputation: 4967

You have an error in your code.

It works if you remove this comment the code:

//some css

Which is inside of

.css ({//some css});

Here's a working jsfiddle without .css.

Here's a working jsfiddle with .css

What's the problem?

The right parenthesis are commented out, therefor you have a very obvious syntax error, it will simply look like this:

 .css ({ uh, oh, no right parenthesis :(

Edit

You updated the code, you removed the comment which was causing the error, your solution works fine like this demo shows.

The id is supposed to be a name with a number that increments on each generation of a new div (name1, name2, etc.). But I cannot get the div to accept the id that I am assigning it.

If I click the panel 2 times the following html is created:

<div id="photoContent1"><h1> Panel </h1><div id="showTable"><h2>add image</h2><div id="table"></div></div></div>
<div id="photoContent2"><h1> Panel </h1><div id="showTable"><h2>add image</h2><div id="table"></div></div></div>

Upvotes: 2

Related Questions