單個元素中的多個文本節點？

Question

可能有人看下面的截圖給我解釋如下：

1. 這是怎麼回事？
2. 如何以編程方式檢測它？
3. 如何以編程方式修復/刪除它？

我相信發生的事情是我有一個pre元素的多個文本節點...我覺得我在很多年前，這樣的事情有可能在MDN閱讀，但我從來沒有遇到過這樣的事情在此之前。

jQuery並沒有透過text()或html()（我在屏幕截圖中看到的兩個控制檯都嘗試）顯示任何異常情況......它只是顯示所有文本節點的內容整合到一個節點中。

未示出的是，當我嘗試手動解決這個問題在控制檯中，通過執行：

$('pre').text($('pre').text()) 

代替具有單個文本節點與所述內容更換所有的文本節點的所有3個合併爲一個，它只替換第一個文本節點的內容與全部3的內容。

所有這些都讓我感到困惑，而且我找不到任何這方面的任何文檔，所以我會很感激如果有人能回答我上面的問題。

哦，因爲我知道有人會問我是怎麼做到的，答案是我不太確定我做了什麼。它是與HTML和我的流星項目的JS之間的圓形環，我想：

在我的HTML我有這樣的：

<pre class="editable" contentEditable="true">{{text}}</pre> 

而且在我的javascript我有這樣的：

"input pre": function (event) { 
    var newText = $(event.target).text(); 
    Ideas.update(this._id, {$set: {text: newText}}); 
} 

所以流星會自動檢查我的數據庫更改text，並把最新的副本到我pre。它還會查看用戶何時編輯pre並編輯數據庫中的text。趣談莫名其妙地這樣做，有時會產生什麼你在上面的圖片中看到（它產生其他奇怪的行爲，其他時間。）

Answer 1

1. 這是怎麼回事？

中有pre元件的多個文本節點。

1. 如何以編程方式檢測它？

$('pre').contents()將返回元素的兒童，包括文本節點的列表。在我的情況下，我只會有文本節點，所以只需檢查列表的長度是否大於1就行。如果我無法做出這樣的假設，我將不得不遍歷返回的列表，看看是否有任何兩個連續的節點是文本節點。 See the documentation from jQuery.

如何以編程修復/擺脫它？

$('pre')[0].normalize()修復它。 See the documentation on normalize from MDN.