Create dynamic div and append content

Question

I have the html below:

<div id="theContentsm">
    <div class="wrap1" style="width:110px; padding-bottom:3px; float:left; margin-right:5px; margin-bottom:5px; border:1px solid #CCC;">
    <div class="photoid1" style="width:104px; height:94px; float:left; margin-left:3px; margin-top:3px;"><img src="images/picture-1.jpg" width="104" height="94"></div>
    <div class="captionid1" style="width:106px; padding-bottom:2px; float:left; margin-left:2px; margin-top:3px; font-family:Verdana, Geneva, sans-serif; font-size:13px; text-align:center;">
    Some Title
    <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
    </div>
</div>

How is it possible to generate this div elements and append some content? (image and Title).

my thought is:

//Append the first div inside #theContentsm

$('<div style="width:110px; padding-bottom:3px; float:left; margin-right:5px; margin-bottom:5px; border:1px solid #CCC;"></div>').html('<div class="photoid1" style="width:104px; height:94px; float:left; margin-left:3px; margin-top:3px;"><img src="http://www.thedomain.com/images/picture-1.jpg" width="104" height="94"></div>').appendTo('#theContentsm');

//Now i need to append and the div class="captionid1" bellow the div that i've create to hold my title.. How can i achive this?

And inside Body:

<div id="theContentsm" style="width:100%; padding-bottom:5px;">
<div style="clear:both;"></div>
</div>

mat · Accepted Answer · 2014-01-27 21:09:14Z

1

seems like you're using jQuery so for updating the whole content of #theContentsm:

$('#theContentsm').html("<div><span>your content</span></div");

or maybe you want to add your content on top of #thecontentsm then use:

$('#theContentsm').prepend("<div><span>your content</span></div");

or at the bottom:

$('#theContentsm').append("<div><span>your content</span></div");

or after:

$('#theContentsm').after("<div><span>your content</span></div");

or before:

$('#theContentsm').before("<div><span>your content</span></div");

edited Jan 27, 2014 at 21:09

answered Jan 27, 2014 at 21:03

mat

1,3781 gold badge13 silver badges18 bronze badges

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

Comments

Mike · Accepted Answer · 2014-01-27 21:02:19Z

0

if the div you're trying to attach the class to has an id

and lets assume the id is "divID"

$("#divID").addClass("captionid1");

for appending content to it...

var yourContent = "<span>Hey this is some content!</span>";

$("#divID").append(yourContent);

answered Jan 27, 2014 at 21:02

Mike

8941 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Create dynamic div and append content

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related