將項目添加到動態列表

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

如您所見，該代碼似乎正常工作。

 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) 

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

因此，可能存在的唯一問題是，如果腳本在DOM准備就緒之前運行，因此document.getElementById('displayList')不會返回任何內容，因為displayList尚不存在。

嘗試在文件末尾運行腳本。 或在DOM ready事件之后（ 在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);