Encode HTML Entities inside an Element Using jQuery
<p>Given the following HTML, how would I go about encoding the HTML entities inside the <code>&lt;pre&gt;&lt;code class="language-html"&gt;&lt;/code&gt;&lt;/pre&gt;</code> block?  n.b., on the actual page where this will be used there are <em>many</em> such blocks.</p>

<pre><code>&lt;div&gt;&lt;strong&gt;Rendered&lt;/strong&gt;
    &lt;div&gt;This is a div, which contains a &lt;p&gt;p&lt;/p&gt; and a &lt;span&gt;span&lt;/span&gt;.&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;&lt;strong&gt;Code&lt;/strong&gt;
    &lt;pre&gt;&lt;code class="language-html"&gt;
        &lt;div&gt;This is a div, which contains a &lt;p&gt;p&lt;/p&gt; and a &lt;span&gt;span&lt;/span&gt;.&lt;/div&gt;
    &lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
</code></pre>

<p>The goal is to have this output the following:</p>

<p>This is a div, which contains a
p
and a span.</p>

<p><code>&lt;div&gt;This is a div, which contains a &lt;p&gt;p&lt;/p&gt; and a &lt;span&gt;span&lt;/span&gt;.&lt;/div&gt;</code></p>

<p>(i.e., the first copy of the code should render, while the second should merely <em>display</em>.)</p>

<p><strong>Edit</strong> <em>(14 Feb 2016)</em>: 
<a href="https://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery">HTML-encoding lost when attribute read from input field</a> addresses a slightly different issue and, consequently, this is not a duplicate.</p>