如何使用jQuery DOM操作动态构建/添加列表元素(ul、ol、li)？
如何使用jQuery DOM操作动态构建/添加列表元素(ul、ol、li)？
提问于 2011-01-18 10:41:30
我正在编程一个AJAX网页(使用IE8)，需要从返回的数据在jQuery中动态建立一个列表。稍后，我将把list转换成jQuery accordian。
我也在尝试学习使用这些jQuery函数和链接的正确方法。我只是个jQuery新手，但我了解JavaScript。我找到了一篇关于jQuery dom函数的好文章：http://www.packtpub.com/article/jquery-1.4-dom-insertion-methods
我想尽可能多地使用HTML函数和jQuery链接来添加内容，而不是使用文本来求助于HTML源代码。我想主要使用.wrap()、.appendto()、.attr()、.text()和.parent()。
我不认为".attr("class", "CC_CLASS").是添加类的最佳方式。
给定HTML代码：
<div id="outputdiv"></div>使用jQuery dom函数将其更改为以下内容：
<div id="outputdiv">
<ul id="JJ_ID">
<li> AAA_text </li>
<li id="BB_ID"> BBB_text </li>
<li class="CC_CLASS"> CCC_text </li>
<li id="DD_ID">DDD_text<br/>
<ol id="EE_ID">
<li> FFF_text </li>
<li id="GG_ID"> GGG_text </li>
<li class="HH_CLASS"> HHH_text </li>
</ol>
</li>
</ul>
</div>我想出了一些代码(忽略文本中的空格)。
var aObj = $('<li></li>').text("AAA_text")
var bObj = $('<li></li>').attr("id", "BB_ID").text("BBB_text");
var cObj = $('<li></li>').attr("class", "CC_CLASS").text("CCC_text");
var dObj = $('<li></li>').attr("id", "DD_ID").text("DDD_text");
var fObj = $('<li></li>').text("FFF_text");
var gObj = $('<li></li>').attr("id", "GG_ID").text("GGG_text");
var hObj = $('<li></li>').attr("class", "HH_CLASS").text("HHH_text"); 以某种方式将(fObj + gObj + hObj)添加到eObj中？
var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);以某种方式将(aObj + bObj + cObj+ dObj + eObj)添加到jObj中？
var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);
jObj.appendTo("#xmlOutputId")回答 1
Stack Overflow用户
发布于 2011-01-18 10:51:54
.append方法返回的容器对象与您对其调用的容器对象相同--利用这一点可以轻松地链接方法：
var inner_list = $('<ol/>', {id: "EE_ID" })
.append( $('<li/>', {text: "FFF_text" })
.append( $('<li/>', {id: "GG_ID", text: "GGG_text" })
.append( $('<li/>', {"class": "HH_CLASS", text: "HHH_text" });
var outer_list = $('<ul/>', {id: "JJ_ID" })
.append( $('<li/>', {text: "AAA_text" })
.append( $('<li/>', {id: "BB_ID", text: "BBB_text" })
.append( $('<li/>', {"class": "CC_CLASS", text: "CCC_text" })
.append(
$('<li/>', {id: "DD_ID", text: "DDD_text"})
.append(inner_list)
);
outer_list.appendTo('#xmlOutputId');实际上，您可以在没有vars的情况下在一条语句中完成整个操作，但在我看来，这样做太难看了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4720022
复制相关文章
相似问题