Javascript 如何使用jQueryDOM操作动态构建/添加列表元素（ul、ol、li）？

我正在编写一个AJAX网页（使用IE8），需要根据返回的数据在jQuery中动态构建一个列表。稍后，我将把列表转换为jqueryaccordian

我还试图学习使用这些jQuery函数和链接的正确方法。我只是一个jquerynoob，但理解JavaScript。我发现了一篇关于jQuery dom函数的好文章：

我想使用jQueryDOM函数和jQuery链接添加尽可能多的内容，而不必求助于使用文本的HTML源代码。我主要想使用

.wrap（）

，

.appendto（）

，

.attr（）

，

.text（）

，和

.parent（）

我不认为“

.attr”（“class”，“CC\u class”）。

是添加类的最佳方式

给定HTML代码：

<div id="outputdiv"></div>

以某种方式将（aObj+bObj+cObj+dObj+eObj）添加到jObj中

var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);  
jObj.appendTo("#xmlOutputId")

---

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

var-internal_-list=$（''，{id:'EE_-id}）
.append（$（'
'，{text:'FFF_text}）
.append（$（'
'，{id:'GG_id'，text:'GGG_text}）
.append（$（'
'，{“类”：“HH_类”，文本：“HH_文本”}）；
var outer_list=$（'
'，{id:“JJ_id”}）
.append（$（'
'，{text:“AAA_text”}）
.append（$（'
'，{id:'BB_id'，text:'BB_text}）
.append（$（'
'，{“类”：“CC_类”，文本：“CCC_文本”}）
.附加（
$（'
'，{id:'DD_id'，text:'DDD_text}）
.append（内部列表）
);
外部列表。附录（'xmlOutputId'）；

---

实际上，你可以在一条没有

var

s的语句中完成整个过程，但在我看来，这太难看了。

又好又紧凑。谢谢，我喜欢，但我在

上遇到了一个javascript错误。append（$（'
，{class:'CC_class'，text:'CCC_text'）

，因为“class”是一个保留字。

var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);

var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);  
jObj.appendTo("#xmlOutputId")

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