CODEWITHSUNDEEP
javascriptjquery
Irene T.
Irene T.

Reputation: 1393

Create dynamic div and append content

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>

Upvotes: 0

Views: 847

Answers (2)

mat
mat

Reputation: 1378

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");

Upvotes: 1

Mike
Mike

Reputation: 894

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);

Upvotes: 0

Related Questions