Question

尝试传递document.createElement方法创建的元素时，会遇到异常结果：

＆＃13;

var Todo = (function () {
  return {
    items: [],
    addItem: function () {
      var task = document
        .querySelector('#top-todo')
        .value
        .trim()
      if (task !== '') {
        this.items.push({ task, complete: false })
        document.querySelector('#top-todo').value = ''
        console.log('Added item: ' + task)
        var newTodo = document.createElement('li')
          .appendChild(document.createElement('p'))
          .appendChild(document.createTextNode(task))
        document.querySelector('#todo-list').appendChild(newTodo)
      }
    }
  }
})()

＆＃13;

<div>
  <ul id="todo-list">
    <li>
      <input id="top-todo" placeholder="I need to..." type="text" />
    </li>
  </ul>
  <input onclick="Todo.addItem()" type="button" value="add" />
</div>

＆＃13;

我们只看到textNode元素被追加到#todo-list元素，而不是完全失败或类型错误。这种行为的原因是什么？是否有一种有效的方法可以将该方法用作追加或插入的参数？

Answer 1

Node.appendChild

返回的值是附加的子项。

您可以将设置为.parentElement.parentElement的子元素的嵌套元素的数量li链接到上次.appendChild()调用，以便在document.createElement('li')处引用newTodo }

＆＃13;

var Todo = (function () {
  return {
    items: [],
    addItem: function () {
      var task = document
        .querySelector('#top-todo')
        .value
        .trim()
      if (task !== '') {
        this.items.push({ task, complete: false })
        document.querySelector('#top-todo').value = ''
        console.log('Added item: ' + task)
        var newTodo = document.createElement('li')
          .appendChild(document.createElement('p'))
          .appendChild(document.createTextNode(task))
          .parentElement.parentElement                    
        document.querySelector('#todo-list').appendChild(newTodo)
      }
    }
  }
})()

＆＃13;

<div>
  <ul id="todo-list">
    <li>
      <input id="top-todo" placeholder="I need to..." type="text" />
    </li>
  </ul>
  <input onclick="Todo.addItem()" type="button" value="add" />
</div>

＆＃13;

Answer 2

li

.appendChild()返回附加的元素。链接函数时，您将获得链中最后返回的值。

有点像这样：

创建li（p是当前工作价值）
创建p
将li附加到p（p是当前工作价值）
创建文本节点
将文本节点附加到newTodo（文本节点是当前工作值）
将当前工作值分配给newTodo。

然后你继续将var newTodo = document.createElement('li'); newTodo .appendChild(document.createElement('p')) .appendChild(document.createTextNode(task));（一个文本节点）插入到文档中。

这样打破它可以得到你想要的东西：

{{1}}

Answer 3

document.createElement('li')

返回一个li元素

document.createElement('li')
  .appendChild(document.createElement('p'))

返回一个p元素

document.createElement('li')
  .appendChild(document.createElement('p'))
  .appendChild(document.createTextNode(task))

返回文本节点

所以你实际上附加了一个文本节点。

作为参数传递时，document.createElement的行为是什么？

3 个答案: