解码 HTML 克隆内容 div

Question

我正在尝试找到一种方法来解码使用 jQuery 克隆的 div 的 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 完成它的工作之后）应该是：

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

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

如果你能在这种情况下帮助我，我很高兴。谢谢大家。

Answer 1

要实现您的要求，请将 #clone 元素的 html() 设置为 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>

解码 HTML 克隆内容 div

Decode HTML content of a cloned div

html

javascript

jquery

clone

decode