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

当试图通过由document.createElement方法创建的元件，现在遇到不寻常的结果：作为参数传递时，document.createElement的行为是什么？

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) 
 
     } 
 
    } 
 
    } 
 
})()

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

而不是完全失效或类型错误，我们看到仅textNode元件附加到#todo-list元件。这种行为的原因是什么？有没有一种有效的方法来使用该方法作为参数来追加或插入？

来源

2017-04-17 Bin Ury

@charlietfl我不确定你的意思。 –

不要将DOM API视为流畅/可链接。它们的设计不是可链接的。如果你想链接使用jQuery – slebetman

Node.appendChild

返回的值是附加的儿童。

你可以链.parentElement.parentElement，设定为li子元素嵌套元素的数量持续.appendChild()打电话以获得参考document.createElement('li')newTodo

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) 
 
     } 
 
    } 
 
    } 
 
})()

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

来源

2017-04-17 01:31:23 guest271314

var newTodo = document.createElement('li') 
    .appendChild(document.createElement('p')) 
    .appendChild(document.createTextNode(task))

.appendChild()返回附加的元素。当你链接函数时，你会得到链中最后返回的值。

它去有点像这样：

创建li（li是当前工作值）
创建p
追加p到li（p是当前工作值）
创建文本节点
将文本节点追加到p（文字点头e是当前工作值）
将当前工作值分配到newTodo。

然后你继续在文档中插入newTodo这是一个文本节点。

打破它，这样会得到你想要的东西：

var newTodo = document.createElement('li'); 
newTodo 
    .appendChild(document.createElement('p')) 
    .appendChild(document.createTextNode(task));

来源

2017-04-17 01:41:41 Ouroborus

有趣。我假定'appendChild'方法在修改后会返回节点树结构的副本： 'li' - >'li> p' - >'li> p {task} –

document.createElement('li')

返回一个li元素

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

回报AP元素

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

返回文本节点

所以你实际上是追加一个文本节点。

来源

2017-04-17 01:43:22 Damien

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

回答

相关问题