Jquery dynamically create content

Question

here is the extract of my code

 $("#temp").append('<div class="dynamic">' );
    $("#temp").append(a[i]);
    $("#temp").append("</div>");

this content is inside a for loop and dynamically add elements to div with id temp.

what i think it should produce is

<div id="temp">

.....
<div class="dynamic">
Education //value of a[i]
</div>
....


</div>

but what exactly it produces it

<div id="temp">

    <div class="dynamic"></div>

    Education

as confirmed from firebug. Because of which my css styling just breaks up.

Can you look into it? Thank you

a is an array which i have created earlier in jquery code.

Wanna_be_Coder
– Wanna_be_Coder

2013-10-01 07:23:46 +00:00
Commented Oct 1, 2013 at 7:23 — Wanna_be_Coder
– Wanna_be_Coder, Commented Oct 1, 2013 at 7:23

adeneo · Accepted Answer · 2013-10-01 07:25:31Z

7

Creating elements with jQuery should be done like this :

$('<div />', {'class': 'dynamic', text: a[i]}).appendTo('#temp');

answered Oct 1, 2013 at 7:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

CJ Ramki Over a year ago

@Wanna_be_Coder if you got correct solution then pick it as an answer

Jonathan Wood Over a year ago

Why is class enclosed in quotes, but text is not? Can it be either way? Or is it just because class is a keyword? Any example of this syntax with slightly more complex markup, such as with additional child elements?

adeneo Over a year ago

@JonathanWood - Yes, class is a reserved keyword in javascript, that's why it's quoted. Here's an example of something a little more complicated -> jsfiddle.net/421qd4n7/1

NaYaN · Accepted Answer · 2013-10-01 07:24:10Z

0

try this in loop, i guess your problem is solved...

var data = "<div class='dynamic'>" + a[i] + "</div>";
$("#temp").append(data);

answered Oct 1, 2013 at 7:24

NaYaN

1,3207 silver badges11 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-01 07:24:36Z

0

Use

var data = '<div class="dynamic">' + a[i] + '</div>';
$("#temp").append(data);

As when you append $("#temp").append('<div class="dynamic">' ); a div is created and closed.

and when you append $("#temp").append(a[i]); it is appended after div

answered Oct 1, 2013 at 7:24

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

Jquery dynamically create content

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related