pre标签文本不在innerText中

Question

我只是在测试一些内容,并注意到pre如果使用parentelement 访问它,标签内的文本就不会出现.

以下是代码示例:

的jsfiddle

(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());
})()

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

我也注意到它之后的任何东西都没有被取出.如果您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.