解码克隆的div的HTML内容

Question

我试图找到一种方法来解码使用div克隆的jQuery的HTML代码。

原始div是由AngularJS变量动态生成的，我希望在<pre>元素中显示它的克隆版本，以便显示用户输入的DOM。

​

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

​

通过按下按钮，我想要的输出(在AngularJS完成它的工作之后)应该是：

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

如何解码克隆div的HTML内容？

如果你能在这件事上帮我，我很高兴。谢谢你们所有人。

Answer 1

要实现所需的目标，请将#clone元素的#clone设置为pre元素的text()，如下所示：

​

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

​