作爲參數傳遞時，document.createElement的行爲是什麼？

Question

當試圖通過由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元件。這種行爲的原因是什麼？有沒有一種有效的方法來使用該方法作爲參數來追加或插入？

Answer 1

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>

Answer 2

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

.appendChild()返回附加的元素。當你鏈接函數時，你會得到鏈中最後返回的值。

它去有點像這樣：

1. 創建li（li是當前工作值）
2. 創建p
3. 追加p到li（p是當前工作值）
4. 創建文本節點
5. 將文本節點追加到p（文字點頭e是當前工作值）
6. 將當前工作值分配到newTodo。

然後你繼續在文檔中插入newTodo這是一個文本節點。

打破它，這樣會得到你想要的東西：

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

Answer 3

document.createElement('li') 

返回一個li元素

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

回報AP元素

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

返回文本節點

所以你實際上是追加一個文本節點。