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

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}});
}

因此，meteor 会自动检查我的数据库中对text 的更改，并将最新的副本放入我的pre。它还可以查看用户何时编辑pre 并在数据库中编辑text。以某种方式执行此操作，有时会产生您在上图中看到的情况（有时会产生其他奇怪的行为。）

Answer 1

1. 这是怎么回事？

pre 元素中有多个文本节点。

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

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

1. 如何以编程方式修复/消除它？

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