首页 > 解决方案 > 动态添加的项目不会附加到列表中

问题描述

我正在尝试根据输入值附加一个列表项。但是,不会附加列表项。我试图在不同的点使用脚本标签,但这无济于事。我错过了什么?

这是我的 HTML

<body>
<main>
    <div>
        <form>
            <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
            <button type="submit" id="addtodo">+</button>
        </form>
        <div class="AddedTodo">
            <ul id="myList">

            </ul>
        </div>    
        <div>
            <p id="clearAll">Clear All</p>
        </div>
    </div>
</main>
</body>
<script type="text/javascript" src="script.js"></script>

这是我的 JavaScript。

document.getElementById("addtodo").onclick = function addItem() {
    var ul = document.getElementById("newtodo").value;
    var li = "<li>" + ul + "</li>";
    document.getElementById("myList").appendChild(li);
}

标签: javascripthtml

解决方案


试试这个简单的解决方案...

myList.innerHTML+='<li>'+newtodo.value+'</li>';

推荐阅读