使用原生JavaScript将li元素添加到ul中

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

- Tim Aych

---

@Teemu，因为$()是典型的jQuery选择器语法。 - BenM

Answer 1

因为你返回的是textNode到element，而应该将newLI添加到其中。

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

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

taskList.appendChild(newLI);

FIDDLE

- adeneo

---

我也在写相同的代码。+1。这里有一个 jsFiddle > http://jsfiddle.net/nq1qy2q1/ - BenM

啊！我知道这只是一些非常简单的东西。非常感谢。 - Tim Aych