Question

我遇到了一个非常简单的脚本，包括文本框，按钮和项目列表。单击该按钮可将文本框值添加到列表中。但是，出于某种原因，文本将作为纯文本附加，而不是作为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);

Answer 1

这是因为当你应该追加element

时，你将textNode返回newLI

var newLI = document.createElement('li');

newLI.appendChild(document.createTextNode(task));

taskList.appendChild(newLI);

FIDDLE

使用vanilla JavaScript将li附加到ul

1 个答案: