Adding item to dynamic list

Question

I'm trying to add text items from the user to a dynamic list. I tried but not getting it. How to go about it...thanks.

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

Add Text

<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

The code seems to work just fine as you can see.

 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> 

So the only problem that might exist is if the script is run before the DOM is ready and thus the document.getElementById('displayList') does not return anything because the displayList does not yet exist.

Try running your script at the end of the file. Or run it after the DOM ready event ( in the DOMContentLoaded event )

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