Javascript jQuery-如何动态添加到列表元素

这可能已经被要求了很多，所以，但我无法使它的工作。 正如标题所说，我需要在一个元素中动态附加

。 每次json更新时都会调用方法

addUsers（）

Html:

<div id="users"></div>

function addUsers() {
    var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    for (var i = 0; i < json.users.length; i++) {       
        users.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }
}

<div id="users">
<ul>
    <li><a href="#"><span class="user-list">User1</span></a></li>
    <li><a href="#"><span class="user-list">User2</span></a></li>
    <li><a href="#"><span class="user-list">User3</span></a></li>
</ul>

<div id="users">
    <ul></ul> //UL is ending here
        <li><a href="#"><span class="user-list">User1</span></a></li>
        <li><a href="#"><span class="user-list">User2</span></a></li>
        <li><a href="#"><span class="user-list">User3</span></a></li>
</div>

Javascript:

<div id="users"></div>

function addUsers() {
    var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    for (var i = 0; i < json.users.length; i++) {       
        users.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }
}

<div id="users">
<ul>
    <li><a href="#"><span class="user-list">User1</span></a></li>
    <li><a href="#"><span class="user-list">User2</span></a></li>
    <li><a href="#"><span class="user-list">User3</span></a></li>
</ul>

<div id="users">
    <ul></ul> //UL is ending here
        <li><a href="#"><span class="user-list">User1</span></a></li>
        <li><a href="#"><span class="user-list">User2</span></a></li>
        <li><a href="#"><span class="user-list">User3</span></a></li>
</div>

函数addUsers（）{
var users=$（'#users'）；//div元素
users.html（“”）；//每次在addUsers（）方法中出现div时，都会清除该div
附加（“
”）；
对于（var i=0；i”）；
}
}

例外输出：

<div id="users"></div>

function addUsers() {
    var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    for (var i = 0; i < json.users.length; i++) {       
        users.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }
}

<div id="users">
<ul>
    <li><a href="#"><span class="user-list">User1</span></a></li>
    <li><a href="#"><span class="user-list">User2</span></a></li>
    <li><a href="#"><span class="user-list">User3</span></a></li>
</ul>

<div id="users">
    <ul></ul> //UL is ending here
        <li><a href="#"><span class="user-list">User1</span></a></li>
        <li><a href="#"><span class="user-list">User2</span></a></li>
        <li><a href="#"><span class="user-list">User3</span></a></li>
</div>

实际输出：

<div id="users"></div>

function addUsers() {
    var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    for (var i = 0; i < json.users.length; i++) {       
        users.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }
}

<div id="users">
<ul>
    <li><a href="#"><span class="user-list">User1</span></a></li>
    <li><a href="#"><span class="user-list">User2</span></a></li>
    <li><a href="#"><span class="user-list">User3</span></a></li>
</ul>

<div id="users">
    <ul></ul> //UL is ending here
        <li><a href="#"><span class="user-list">User1</span></a></li>
        <li><a href="#"><span class="user-list">User2</span></a></li>
        <li><a href="#"><span class="user-list">User3</span></a></li>
</div>

//ul在这里结束

---

我一定是做错了什么。感谢你的指点。谢谢

实际上是将

li

元素附加到

Div

元素。但是在您的上下文中，

ul

存在于

Div

元素中。因此，您必须使用

.find（）

函数来选择它

试试看

var xUl=users.find（'ul'）；
对于（var i=0；i”）；
}

实际上是将

li

元素附加到

Div

元素。但是在您的上下文中，

ul

存在于

Div

元素中。因此，您必须使用

.find（）

函数来选择它

试试看

var xUl=users.find（'ul'）；
对于（var i=0；i”）；
}

函数addUsers（）{
var users=$（'#users'）.empty（），
ul=$（“
”）；
$.each（json.users，function（\ux，user）{
变量li=$（“
”），
a=$（''，{href:'#'}），
sp=$（''，{'class'：'user list'，text:user}）；
附加（li.append）（a.append（sp））；
});
附加（ul）；
}

函数addUsers（）{
var users=$（'#users'）.empty（），
ul=$（“
”）；
$.each（json.users，function（\ux，user）{
变量li=$（“
”），
a=$（''，{href:'#'}），
sp=$（''，{'class'：'user list'，text:user}）；
附加（li.append）（a.append（sp））；
});
附加（ul）；
}

试试这个：

var temp = $('<ul> </ul>');
//LOOP
temp.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>')
//END LOOP
users.html(temp)

var-temp=$（'
'）；
//环路
临时附加（“
”）
//端环
html（temp）

试试这个：

var temp = $('<ul> </ul>');
//LOOP
temp.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>')
//END LOOP
users.html(temp)

var-temp=$（'
'）；
//环路
临时附加（“
”）
//端环
html（temp）

无法在注释部分格式化我的代码片段，因此将其添加到应答中。 首先，感谢@Rajaprabhu@adeneo和其他人的快速回复

这是修改后的代码。请让我知道这是否正确

var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    var xUl = users.find('ul');
    for (var i = 0; i < json.users.length; i++) {       
         xUl.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }

var users=$（'#users'）；//div元素
users.html（“”）；//每次它进入addUsers（）方法时清除该div
附加（“
”）；
var xUl=users.find（'ul'）；
对于（var i=0；i”）；
}

无法在注释部分格式化我的代码片段，因此将其添加到应答中。 首先，感谢@Rajaprabhu@adeneo和其他人的快速回复

这是修改后的代码。请让我知道这是否正确

var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    var xUl = users.find('ul');
    for (var i = 0; i < json.users.length; i++) {       
         xUl.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }

var users=$（'#users'）；//div元素
users.html（“”）；//每次它进入addUsers（）方法时清除该div
附加（“
”）；
var xUl=users.find（'ul'）；
对于（var i=0；i”）；
}
（函数（）{
var i=0；
var users_div=$（“#users”）；
用户_div.html（“”）；
var child_ul=$（“
”）.appendTo（users_div）；
对于（i；i<3；i+=1）{
var child_li=$（'
'）。附录（child_ul）；
变量child_a=$（''）.attr({
href:“#”
}).附录（child_li）；
var child_span=$（''）.attr({
类：“用户列表”
});
子附录（子附录a）；
}
})();
（函数（）{
var i=0；
var users_div=$（“#users”）；
用户_div.html（“”）；
var child_ul=$（“
”）.appendTo（users_div）；
对于（i；i<3；i+=1）{
var child_li=$（'
'）。附录（child_ul）；
变量child_a=$（''）.attr({
href:“#”
}).附录（child_li）；
var child_span=$（''）.attr({
类：“用户列表”
});
子附录（子附录a）；
}
})();
您将所有内容附加到用户，而您要做的是将
li
元素附加到
ul
，正如拉贾普拉布胡·阿拉文达萨米所说。您将所有内容附加到用户，而您要做的是将
li
元素附加到
ul
，就像Rajaprabhu Aravindasamy说的那样。@Java_用户很乐意帮忙@Java_用户很高兴能提供帮助。！