Decode HTML content of a cloned div

I'm trying to find a way to decode the HTML code of a div cloned using jQuery.
The original div is dynamically generated by AngularJS variables, and I would like to display its cloned version in a <pre> element in order to display the DOM obtained as a result of user input.

$(document).ready(function() {
  $('#cloneIt').on('click', function() {
    $('#clone').children().clone().appendTo("pre");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clone" class="hidden">
  <table>
    <tbody>
      <tr ng-repeat="language in languages">
        <td class="ico"><img src="assets/images/ico/audio.png"></td>
        <td class="r-text"><a href="assets/audio/{{ language.audio }}.mp3" target="_blank">Ascolta la sintesi in <strong>{{ language.name }}</strong></a></td>
        <td class="ico"><img src="assets/images/ico/pdf.png"></td>
        <td class="r-text"><a href="assets/pdf/{{ language.pdf }}.pdf" target="_blank">Leggi la sintesi in <strong>{{ language.name }}</strong></a></td>
      </tr>
    </tbody>
  </table>
</div>
<pre class="prettyprint"></pre>

<p>
  <button id="cloneIt" class="btn btn-warning">Generate source code</button>
</p>

By pressing the button my desired output (after AngularJS has done its work) should be:

&lt;table&gt;   
 &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td class=&quot;ico&quot;&gt;&lt;img src=&quot;assets/images/ico/audio.png&quot;&gt;&lt;/td&gt;
      &lt;td class=&quot;r-text&quot;&gt;&lt;a href=&quot;assets/audio/Audio-link_01.mp3&quot; target=&quot;_blank&quot;&gt;Listen to &lt;strong&gt;Italian&lt;/strong&gt; track&lt;/a&gt;&lt;/td&gt;
      &lt;td class=&quot;ico&quot;&gt;&lt;img src=&quot;assets/images/ico/pdf.png&quot;&gt;&lt;/td&gt;
      &lt;td class=&quot;r-text&quot;&gt;&lt;a href=&quot;assets/pdf/Pdf-link_01.pdf&quot; target=&quot;_blank&quot;&gt;Read &lt;strong&gt;Italian&lt;/strong&gt; transcript&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    [and so on...]
  &lt;/tbody&gt;
&lt;/table&gt;

How can I decode the HTML content of a cloned div?

I am pleased if you can help me in this case. Thank you all.

Solution

To achieve what you required set the html() of the #clone element as the text() of the pre element, like this:

$(document).ready(function() {
  $('#cloneIt').on('click', function() {
    $("pre").text($('#clone').html());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clone" class="hidden">
  <table>
    <tbody>
      <tr ng-repeat="language in languages">
        <td class="ico"><img src="assets/images/ico/audio.png"></td>
        <td class="r-text"><a href="assets/audio/{{ language.audio }}.mp3" target="_blank">Ascolta la sintesi in <strong>{{ language.name }}</strong></a></td>
        <td class="ico"><img src="assets/images/ico/pdf.png"></td>
        <td class="r-text"><a href="assets/pdf/{{ language.pdf }}.pdf" target="_blank">Leggi la sintesi in <strong>{{ language.name }}</strong></a></td>
      </tr>
    </tbody>
  </table>
</div>
<pre class="prettyprint"></pre>

<p>
  <button id="cloneIt" class="btn btn-warning">Generate source code</button>
</p>