pre tag text not coming in innerText : <p>I was just testing something and noticed that text inside <code>pre</code> tag does not appear if you access it using <code>parent</code> element. </p>

<p>Following is the code example: </p>

<p><a href="https://jsfiddle.net/RajeshDixit/2wkvvapn/" rel="nofollow">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(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());
})()</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;p id="content"&gt;
  p text
  &lt;pre&gt;Pre text&lt;/pre&gt;
  &lt;small&gt;small text&lt;/small&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>I also noticed that anything after it is also not fetched. If you move <code>small</code> before <code>pre</code>, text appears. What could be the reason for it?</p>
