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元素并附加一些内容？（图片和标题）。

我的想法是：

//将第一个div添加到#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');

//现在我需要追加并且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);

创建动态div并附加内容

2 个答案: