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

Question

有人可以查看以下屏幕截图并解释以下内容：

1. 发生了什么事？
2. 如何以编程方式检测它？
3. 我如何以编程方式修复/删除它？

我相信发生的事情是我在一个pre元素中有多个文本节点...我觉得我多年前在MDN上读过这样的事情是可能的，但我＆＃39从来没有遇到类似的东西。

jQuery没有通过text()或html()揭示任何不寻常的事情（我在屏幕截图中看到的都在控制台中尝试）...它只显示所有内容文本节点合并为单个节点。

未显示当我尝试在控制台中手动修复此问题时，执行以下操作：

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

不是用单个文本节点替换所有文本节点，而是将所有3个内容全部合并为一个，它只用第3个文本节点的内容替换第一个文本节点的内容。 / p>

所有这一切都令我感到困惑，我无法找到任何相关的文档，所以如果有人能回答我上面的问题，我真的很感激。

哦，因为我知道有人会问我是怎么做到的，答案是我不太确定我做了什么。它与我的流星项目的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.