使用jQuery而不是innerHTML获取innerText

Question

我有一个figcaption，我想要它的文字。 这就是chrome元素检查器中的外观。 由于某种原因，“ innerHTML”以返回开头，然后是很多空格。 但是，“ innerText”看起来不错，所以我对此感兴趣。

在线上，我看到我必须使用text()方法来获取innerText，但似乎提供了innerHTML：

console.log("-"+$(this).find("figcaption").text()+"-");

那么我怎样才能进入innerText？

Answer 1

创建HTML元素时，例如：

<p>Hello          World</p>

当浏览器呈现时，默认情况下空白被折叠。 结果将是“ Hello World”。 数据崩溃发生在浏览器渲染时。 浏览器中包含的DOM模型维护实际文本，包括其中包含的所有空白。 因此，您在屏幕上看到的内容可能与DOM中包含的数据不同。

可以通过称为“ innerText”的DOM属性获得空格分隔的数据。

提供了一个显示数据的jsBin示例。

演示代码基本上是：

的HTML

<p id="here">Hello      World</p>
<button>Show</button>

的JavaScript

$(function() {
  $("button").click(function() {
    console.log("text: " + $("#here").text());
    console.log("innerText: " + $("#here").prop("innerText"));
  });
});

控制台将记录：

text: Hello      World
innerText: Hello World

从最初的问题开始，使用text()方法将返回DOM数据，而使用prop("innerText")将返回浏览器构建的计算出的innerText值。