在jQuery Mobile中动态添加项目到列表视图

Question

我在jQuery mobile中动态添加项目到列表视图时遇到了一些麻烦。基本上我想要在文本框中输入的任何内容添加到列表中。我有下面的代码，并不能找出为什么没有出现所需的输出。

<script> 
    var listCreated = false; 
    function appendToList() { 
    if(!listCreated) { 
     $("#items").append("<ul id='list' data-role='listview' data-inset='true'></ul>"); 
     listCreated = true; 
     $("#items").trigger("create"); 
    } 
    $("#list").append("<li>"); 
    $("#list").append(document.getElementById(item).value); 
    $("#list").append("</li>"); 
    $("#list").listview("refresh"); 
    } 
</script> 
<div data-role="content"> 
    <div id="items"></div> 
    <input type="text" id="item" /> 
    <input type="button" value="Add item to list" onclick="appendToList()"/> 
</div> 

Answer 1

尝试创建整个li再追加，现在，你要追加的开口<li>到列表中，然后将值列表，而不是新li

var value = $("#item").val(); 
var listItem = "<li>" + value + "</li>"; 
$("#list").append(listItem); 

演示：http://jsfiddle.net/DVbGY/1/