jquery动态添加html元素

Zemo 2013-09-04 11:15:49
如何用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>
...全文
6102 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
$('body .thumbnails:nth-child(1)').html('<li class="span3">..4个元素的HTML....</li>'); 用nth-child来控制第几个.thumbnails
Zemo 2013-09-05
  • 打赏
  • 举报
回复
引用 6 楼 conanhhy 的回复:
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");
恩.我先用硬编码写的. 反正还要套几个循环. 你的第二种方法我能理解意思. 但是后期要用arttemplate从数据库渲染数据进来. 所以就没用你第二种方法. 谢谢你.
conanhhy 2013-09-05
  • 打赏
  • 举报
回复
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");
Zemo 2013-09-05
  • 打赏
  • 举报
回复
引用 4 楼 changjay 的回复:
$('body .thumbnails:nth-child(1)').html('<li class="span3">..4个元素的HTML....</li>'); 用nth-child来控制第几个.thumbnails
那如果我要在新建的这个<ul class="thumbnails"></ul>里面添加. 还有就是我用最简单的办法.

var txt1 = '';//这里放我上面一堆html代码
$('.more').before(txt1);
要报错. var txt1 = ''里面的内容好像不能换行.
fzfei2 2013-09-04
  • 打赏
  • 举报
回复
引用 2 楼 qq245282209 的回复:
[quote=引用 1 楼 fzfei2 的回复:] $('.thumbnails').html('<li class="span3">..4个元素的HTML....</li>');
页面里已经存在好多个.thumbnails了 [/quote] 你是要第一个,最后一个,还是加ID,其它标识区分
Zemo 2013-09-04
  • 打赏
  • 举报
回复
引用 1 楼 fzfei2 的回复:
$('.thumbnails').html('<li class="span3">..4个元素的HTML....</li>');
页面里已经存在好多个.thumbnails了
fzfei2 2013-09-04
  • 打赏
  • 举报
回复
$('.thumbnails').html('<li class="span3">..4个元素的HTML....</li>');

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧