Question

我只是在测试某些内容，并注意到pre标记内的文字如果使用parent元素访问它，则不会显示。

以下是代码示例：

＆＃13;

(function() {
  var _innerText = document.getElementById("content").innerText;
  var _innerHTML = document.getElementById("content").innerHTML;
  var _textContent = document.getElementById("content").textContent;

  console.log(_innerText, _innerHTML, _textContent)

  console.log($("#content").text());
})()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="content">
  p text
  <pre>Pre text</pre>
  <small>small text</small>
</p>

＆＃13;

我也注意到它之后的所有内容都没有被提取。如果您在small之前移动pre，则会显示文字。可能是什么原因？

Answer 1

您无法在HTML中的<pre>内嵌套块级元素，例如<p>。您的代码块在浏览器中呈现如下。

<p id="content"> p text </p>
<pre>Pre text</pre>
<small>small text</small>
<p></p>

您可以使用div代替p。

Answer 2

因为你不能把＆＃34; pre＆＃34;在＆＃34; p＆＃34;标记，尝试＆＃34; div＆＃34;：

<div id="content">
  p text
  <pre>Pre text</pre>
  <small>small text</small>
</div>

pre标签文本不在innerText中

2 个答案: