創建動態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);