javascript 如何使用 jQuery DOM 操作动态构建/添加列表元素（ul、ol、li）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4720022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically build/add list elements (ul, ol, li) using jQuery DOM manipulations?
提问by user579338
I am programming an AJAX web page (using IE 8) and need to dynamically build a list in jQuery from the data returned. Later, I will be converting list to jQuery accordian.
我正在编写一个 AJAX 网页（使用 IE 8）并且需要根据返回的数据在 jQuery 中动态构建一个列表。稍后，我会将列表转换为 jQuery 手风琴。
I am also trying to learn the proper way to use these jQuery functions and chaining. I am just a jQuery NOOB, but understand JavaScript. I found a good article on jQuery dom functions: http://www.packtpub.com/article/jquery-1.4-dom-insertion-methods
我也在努力学习使用这些 jQuery 函数和链接的正确方法。我只是一个 jQuery NOOB，但了解 JavaScript。我找到了一篇关于 jQuery dom 函数的好文章：http: //www.packtpub.com/article/jquery-1.4-dom-insertion-methods
I want to add as much as possible using the jQuery dom functions, and jQuery chaining, without resorting to HTML source code using text. I want to mostly use .wrap(), .appendto(), .attr(), .text(), and .parent().
我想尽可能多地使用 jQuery dom 函数和 jQuery 链接添加，而不是求助于使用文本的 HTML 源代码。我想主要使用.wrap(), .appendto(), .attr(), .text(), 和.parent()。
I don't think that the ".attr("class", "CC_CLASS").is the best way to add a class.
我不认为 ".attr("class", "CC_CLASS").是添加课程的最佳方式。
Given the HTML code:
鉴于 HTML 代码：
<div id="outputdiv"></div>
Use jQuery dom functions to change it to be the following:
使用 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>
Some code I figured out (ignoring the spaces in text).
我想出了一些代码（忽略文本中的空格）。
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");
Somehow add (fObj + gObj + hObj) into eObj ?
不知何故将 (fObj + gObj + hObj) 添加到 eObj 中？
var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);
Somehow add (aObj + bObj + cObj+ dObj + eObj) into jObj ?
以某种方式将 (aObj + bObj + cObj+ dObj + eObj) 添加到 jObj 中？
var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);
jObj.appendTo("#xmlOutputId")
回答by hobbs
The .appendmethod returns the same container object you called it on -- make use of this to chain methods pleasantly:
该.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');
You could actually do the entire thing in a single statement with no vars, but in my opinion that would be getting too ugly.
您实际上可以在没有vars的单个语句中完成整个事情，但在我看来，这会变得太难看。
