爲什麼我的單行等同於將段落附加到節點而不給我相同結果的函數？

Question

我一直在關注Scala.js上的basic tutorial。爲了給我的HTML頁面添加一個<p>標籤，本教程定義了一個函數appendPar，它將包含文本的段落附加到另一個節點。

def appendPar(targetNode: dom.Node, text: String): Unit = { 
    val parNode = document.createElement("p") 
    val textNode = document.createTextNode(text) 
    parNode.appendChild(textNode) 
    targetNode.appendChild(parNode) 
} 

該功能被稱爲TutorialApp的主要功能裏追加<p>Hello world</p>到文檔的主體。當我嘗試它時它工作得很好。

但是，當我嘗試用main中的一行代替上面的代碼時，Hello world被追加到body中，但未被封裝在<p>...</p>中。

document.body appendChild (document.createElement("p") appendChild 
    document.createTextNode("Hello world"))  

據我所知，我的一行代碼相當於appendPar(document.body, "Hello world")。

Answer 1

我並沒有真正推薦過這種簡單的風格 - 它很簡潔，但也很混亂（混合功能和副作用的風格），這就是你的bug來自哪裏。

最終，您的內部塊將返回新創建的TextNode，所以這就是document.body appendChild的參數。 TextNode原本是這一事實p的孩子是無關緊要的 - 它然後重新排列在document.body之下。

換言之，事件的序列是：

• 創建p元件
• 創建文本節點
• 追加文本節點到p
• 追加文本節點document.body

最後一步改變它去...