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

Question

这可能已经被问了很多，但我无法让它发挥作用。 正如标题所说，我需要附加 <ul> <li>动态地在一个元素内。 方法addUsers()每次更新 json 时都会调用。

HTML:

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

Javascript:

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>

我一定做错了什么。感谢任何指点。谢谢!

Answer 1

您实际上是将 li 元素附加到 Div 元素。但在您的上下文中， ul 存在于该 Div 元素内部。所以你必须使用 .find() 函数来选择它。

尝试，

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