如何將HTML文檔中的列表項作爲列表項交互添加到列表中而不將列表項存儲爲JavaScript變量？

Question

這是一個關於javascript編譯（我認爲）以及如何將文本附加到HTML文檔的問題。

我正在關注一個示例here，因爲我想交互式添加元素到文檔列表中。

我的HTML文件中包含一個列表：

<ul id="sList"> </ul>

如果我寫的JavaScript這樣的：

var textnode = document.createTextNode(s); 
var node = document.createElement("li"); 
node.appendChild(textnode); 
document.getElementById("sList").appendChild(node); 

每一個字符串（變量s各持有）被附加到一個列表該文件。

我天真地認爲我可以寫在較少的行。

var node = document.createElement("li"); 
node.appendChild(document.createTextNode(s)); 
document.getElementById("sList").appendChild(node); 

作品如預期，追加每個s的列表作爲列表項，但每個未能正確顯示爲一個列表項，如果我嘗試通過不存儲所創建的「禮」爲進一步減少代碼變量。例如，該腳本附加標記之間，但沒有列表項文字：

var textnode = document.createTextNode(s) 
var node = (document.createElement("li")).appendChild(textnode) 
document.getElementById("sList").appendChild(node) 

同樣，我的第一次嘗試是這樣的一行代碼：

document.getElementById("sList").appendChild(document.createElement("li").appendChild(document.createTextNode(s))) 

也追加<ul>標籤，但沒有內文作爲列表項目。

所以我只是想知道如何編譯器解釋一個文本節點的appendChild調用到尚未創建的document.createElement，以及是否有可能將項目附加到列表而不先將它們存儲爲變量。這個問題出於好奇，雖然我認爲它也會更好地理解DOM，以及如何用更少的JavaScript做更多。

Answer 1

所以我只是想知道編譯器如何解釋文本節點還沒有被創建一個使用document.createElement的使用appendChild電話...

它不是編譯器，它的DOM。 已經創建了（你叫createElement）;還沒有發生的事情是你沒有將它添加到文檔中，但沒關係，它仍然是一個對象，它仍然可以附加其他對象。

以及是否可以將項目附加到列表而不先將它們存儲爲變量。

是，通過使用appendChild的返回值，這is the child element that was appended：

list.appendChild(document.createElement('li')).appendChild(document.createTextNode(s)); 

就這樣，我們：

1. 創建li元素
2. 它添加到列表中
3. 使用追加它的返回值（li元素）的文本節點

例如追加，這種附加標記之間，但沒有列表項文字：

var textnode = document.createTextNode(s) 
var node = (document.createElement("li")).appendChild(textnode) 
document.getElementById("sList").appendChild(node) 

那是因爲你要追加的appendChild返回值到名單。 appendChild的返回值是附加的孩子，而不是它附加到的元素。所以node指的是文本節點。在將該節點附加到li之後，然後您將移動到它到上面最後一行的list。