創建動態的div和追加內容

Question

我的HTML如下：

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

怎麼可能產生這種div元素和追加一些內容？ （圖片和標題）。

我的想法是：

//追加內#theContentsm第一個div

$('<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'); 

//現在我需要追加和DIV CLASS = 「captionid1」 吼叫，我已經在div創建來保存我的標題..我如何實現這個？

而且體內：

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

Answer 1

好像你正在使用jQuery所以更新#theContentsm的全部內容：

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

或者也許你想添加內容上#thecontentsm的頂部，然後使用：

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

或在底部：

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

或之後：

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

或之前：

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

Answer 2

，如果你試圖附加類的div來有一個id

，並讓我們假設id爲 「DIVID」

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

爲其添加內容...

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

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