jquery动态添加html元素

2013-09-04 11:15:49 6.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

AI辅助发明专利撰写实战：30分钟高效生成高质量技术专利文档在技术专利撰写领域，尤其是软件、算法或系统架构相关的发明专利，如何将创新的技术构思快速、规范地转化为符合《专利法》要求的申请文件，是许多开发者和技术团队面临的共同挑战。传统的人工撰写方式不仅耗时耗力，对撰写人的法律和技术双重背景要求极高，还容易因格式或术语不规范导致审查意见增多。本文将分享一套利用 AI 辅助工具，系统化、高效率地完成一篇高质量发明专利说明书撰写的实战流程。通过清晰的步骤拆解、可复制的提示词（Prompt）工程以及关键注意事项，即使是首次接触专利撰写的开发者，也能在短时间内掌握从技术方案梳理阅读详情

如何用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>

...全文

TSMaster实战：如何用LIN总线唤醒你的汽车电子系统（附波形分析）本文通过TSMaster工具实战解析LIN总线唤醒机制。详细介绍了LIN网络唤醒的协议要求、时序参数计算，并演示了如何在TSMaster中配置唤醒信号、捕获分析波形，以及验证休眠流程。文章结合常见问题排查，为汽车电子工程师提供了从理论到实践的完整调试指南。阅读详情

Zemo

JavaScript 87,983 成员 224,680 内容

+ 关注 + 加入社区

切换为时间正序

去圣西罗-为尤文喝彩 2013-09-05

打赏
举报

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


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

jquery动态添加html元素

相关推荐