单个元素中有多个文本节点？

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元素中有多个文本节点。

2. 如何以编程方式检测它？

$('pre').contents()将返回元素的子元素列表，包括文本节点。就我而言，我只会有文本节点，因此只需检查列表的长度是否大于 1 即可。如果我不能做出这个假设，我将不得不遍历返回的列表并查看是否有任何两个连续的节点是文本节点。请参阅 jQuery 的文档。

3. 如何以编程方式修复/摆脱它？

$('pre')[0].normalize()修复它。请参阅有关 MDN 规范化的文档。