将项目添加到动态列表

Adding item to dynamic list

本文关键字：动态 列表 添加 项目      更新时间：2023-09-26

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

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

如您所见，代码似乎工作正常。

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 就绪事件之后运行它（在 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);

试试这个：

$('#displayList').append(ul);
相关文章：