用香草JavaScript在ul后面加一个li

Appending an li to ul with vanilla JavaScript

本文关键字：li 一个 JavaScript 香草 ul      更新时间：2023-09-26

我遇到了一个非常简单的脚本的问题，该脚本由文本框、按钮和项目列表组成。单击该按钮可将文本框值添加到列表中。然而，由于某种原因，文本被附加为纯文本，而不是在li元素内部。JSFiddle

 <form>                      
     <input type="text" class="form-control" placeholder="Task" id="text_task">
   <button type="submit" id="btn_add_task" class="btn btn-primary">Add Task</button>
</form>           
<ul id = "list_tasks">
</ul>

JS:

function $(element) {
    return document.getElementById(element);
}
var taskSubmit = $('btn_add_task');
var taskBox = $('text_task');
var taskList = $('list_tasks');
taskSubmit.addEventListener('click', function(e) {
    e.preventDefault();
    var task = taskBox.value.trim();
    var newLI = document.createElement('li');
    var element = newLI.appendChild(document.createTextNode(task));
    taskList.appendChild(element);
    taskBox.value = '';
}, false);

这是因为当您应该附加newLI 时，您将textNode返回到element

var newLI = document.createElement('li');
newLI.appendChild(document.createTextNode(task));
taskList.appendChild(newLI);

FIDDLE

相关文章：