用jQuery而不是innerHTML来获取innerHTML

Question

我有一个小雕像，我想要它的文本。这就是在铬元素检查器中的样子。出于某种原因，“innerHTML”以返回开始，然后是大量的空格。不过“innerText”看起来不错，所以我对此很感兴趣。

​

​

在网上，我看到我必须使用text()方法来获取innerText，但它似乎给出了innerHTML：

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

​

​

那么我怎么去innerText呢？

Answer 1

当您创建HTML元素时，例如：

<p>Hello          World</p>

当浏览器呈现时，默认情况下空格会折叠。结果将是“你好世界”。数据折叠发生在浏览器呈现时。浏览器中包含的DOM模型维护实际文本，包括其中包含的任何空格。因此，您在屏幕上看到的可能与DOM中包含的数据不一样。

空白剥离的数据可以通过名为"innerText“的DOM属性获得。

已经提供了显示数据的jsBin示例。

示范代码基本上是：

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