将项添加到动态列表

Question

我尝试将用户的文本项添加到动态列表中。我试过但没有得到它。如何去做...谢谢。

<div id="displayList"></div>

添加文字

<script>
var displayList = document.getElementById('displayList')
var inputTxt = document.getElementById('inpText')
var listArray = ['Orange', 'White', 'Green'];
    var li;
    var ul = document.createElement('ul')
    var len = listArray.length;
        for(var i=0; i<len; i++){
            li = document.createElement('li')
            li.appendChild(document.createTextNode(listArray[i]))                       
            ul.appendChild(li)
        }

    displayList.appendChild(ul)


</script>

Answer 1

试试这个：

$('#displayList').append(ul);

Answer 2

您可以看到代码似乎正常工作。

＆＃13;

＆＃13;

var displayList = document.getElementById('displayList')
var inputTxt = document.getElementById('inpText')
var listArray = ['Orange', 'White', 'Green'];
    var li;
    var ul = document.createElement('ul')
    var len = listArray.length;
        for(var i=0; i<len; i++){
            li = document.createElement('li')
            li.appendChild(document.createTextNode(listArray[i]))                       
            ul.appendChild(li)
        }

    displayList.appendChild(ul)

＆＃13;

<div id="displayList"></div>

＆＃13;

＆＃13;

＆＃13;

因此，唯一可能存在的问题是，如果脚本在DOM准备就绪之前运行，那么document.getElementById('displayList')不会返回任何内容，因为displayList尚不存在。

尝试在文件末尾运行脚本。或者在DOM就绪事件（DOMContentLoaded事件）

中的之后运行它

document.addEventListener('DOMContentLoaded', function() {
    var displayList = document.getElementById('displayList')
    var inputTxt = document.getElementById('inpText')
    var listArray = ['Orange', 'White', 'Green'];
        var li;
        var ul = document.createElement('ul')
        var len = listArray.length;
            for(var i=0; i<len; i++){
                li = document.createElement('li')
                li.appendChild(document.createTextNode(listArray[i]))                       
                ul.appendChild(li)
            }

        displayList.appendChild(ul)
}, false);