jquery动态添加html元素

Question

如何用jquery添加复杂元素?
我要添加如下复杂的元素怎么办?before().append()吗?
其实:
<ul class="thumbnails"></ul>
里面是四个相同的元素怎么用循环加入?<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="300x200"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="300x200"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="300x200"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="300x200"
style="width: 300px; height: 200px;"
src="">
<div class="caption">
<ul class="project-one">
<li class="project-title"><a href="${ctx }/project/detail?id=" title="">
这里是用来写项目的简介的。 </a></li>
<li class="project-function"><a
href="#"><i class="address"></i>成都</a> <a class="persent" href="#"> 58% </a></li>
<li class="project-stats">
<div class="project-jindu">
<div class="projectpledged" style="width: 30%;"></div>
</div>
<div class="projectstats">
<p class="widtha">
<strong> 122 </strong> 关注
</p>
<p class="widthb">
<strong><b>￥</b> 1028 </strong> 筹资
</p>
<p class="widthc">
<strong> 36<b>天</b>
</strong> 剩余时间
</p>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
jqueryjavascript

Answer 1

$('.thumbnails').html('<li class="span3">..4个元素的HTML....</li>');

Answer 2

页面里已经存在好多个.thumbnails了

Answer 3

页面里已经存在好多个.thumbnails了

你是要第一个，最后一个，还是加ID,其它标识区分

Answer 4

$('body .thumbnails:nth-child(1)').html('<li class="span3">..4个元素的HTML....</li>');
用nth-child来控制第几个.thumbnails

Answer 5

那如果我要在新建的这个<ul class="thumbnails"></ul>里面添加. 
还有就是我用最简单的办法. var txt1 = '';//这里放我上面一堆html代码
$('.more').before(txt1);要报错. var txt1 = ''里面的内容好像不能换行. 

Answer 6

LZ有两种方式，一种硬编码，见下：var html = "<li class='span3'><div class='thumbnail'><img data-src='holder.js/300x200' alt='300x200' style='width:300px;height:200px;' src=''><div class='caption'><ul class='project-one'><li class='project-title'><a href='${ctx}/project/detail?id=' title=''>这里是用来写项目的简介的。</a></li><li class='project-function'><a href='#'><i class='address'></i>成都</a><a class='persent'href='#'>58%</a></li><li class='project-stats'><div class='project-jindu'><div class='projectpledged' style='width:30%;'></div></div><div class='projectstats'><p class='widtha'><strong>122</strong>关注</p><p class='widthb'><strong><b>￥</b>1028</strong>筹资</p><p class='widthc'><strong>36<b>天</b></strong>剩余时间</p></div></li></ul></div></div></li>";
$(html).appendTo("ul.thumbnails");如果有多个，可以写成：$(html).appendTo("ul.thumbnails:eq(" + idx + ")");
另一种，动态生成，参数灵活设置。举个例子。
从内容上看，有以下标签：<div><li><ul><a><img><p>，一些<i><strong>标签可以转为相应的style
比如下面获取ul标签function GetTagUL(attr, style, html) {
   var tagUL = $("<ul></ul>");
   if (attr !== undefined && $.trim(attr) !== "") {
      $(tagUL).attr(attr);
   }
   if (style !== undefined && $.trim(style) !== "") {
      $(tagUL).css(style);
   }
   if (html !== undefined && $.trim(html) !== "") {
      $(tagUL).html(html);
   }
   return tagUL;
}外部使用：var ul = GetTagUL({ id: 'ul' }, { "text-align": "center" }, "content");
$(ul).appendTo("ul.thumbnails");

Answer 7

恩.我先用硬编码写的. 反正还要套几个循环. 
你的第二种方法我能理解意思. 
但是后期要用arttemplate从数据库渲染数据进来. 所以就没用你第二种方法. 谢谢你.