将项目添加到动态列表答案

【问题标题】：Adding item to dynamic list将项目添加到动态列表
【发布时间】：2016-08-17 03:53:51
【问题描述】：

我正在尝试将来自用户的文本项添加到动态列表中。我试过但没有得到它。怎么办...谢谢。

<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>

【问题讨论】：

标签： javascript arrays list dom dynamic

【解决方案1】：

试试这个：

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

【讨论】：

感谢您的回复。实际上，我知道我发送的代码可以正常工作。我所追求的是将列表加载后使用的数组列表中的一个项目。如果用户想从输入框中添加另一种颜色，比如 PURPLE，然后单击“添加项目”按钮，它应该添加到显示的列表中。我怎么做？我尝试使用 listArray.push('Purple')，但它没有添加。

【解决方案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)

&lt;div id="displayList"&gt;&lt;/div&gt;

所以唯一可能存在的问题是如果脚本在 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);

【讨论】：