使用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值。