复制变量 <div> 的 html 元素以及其他元素

Question

这是一个<div>用作markdown 到 html 转换器的函数，其内部html是可变的：

<div id="markdown" class="classname">

</div>

我想制作一个 javascript 函数，它复制（到剪贴板）内部html的<div>，以及div: 的样式表（注意：样式表不是可变的）

<style>

html {

font-size: 13px; 

line-height: 1.5; 

padding:60px;

}

 <!-- and many more... -->

</style>

预期的复制结果如下；

<style>

html {

font-size: 13px; 

line-height: 1.5; 

padding:60px;

}

 <!-- and many more... -->

</style>

<!-- below are sample contents from the <div> -->

<h1>markdown test</h1>

<p>hello</p>

需要什么脚本来实现这个？通过窗口警报复制结果prompt也可以。

Answer 1

您可以在这里使用 jQuery，使用下面的脚本，您可以在其中阅读HTMLmarkdowndiv和 css 脚本

$(function(){

  var html = $('#markdown').html();

  console.log(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="markdown" class="classname">

  <style>

    html {

      font-size: 13px;

      line-height: 1.5;

      padding: 60px;

    }

    

    <!-- and many more... -->

  </style>

  <!-- below are sample contents from the <div> -->

  <h1>markdown test</h1>

  <p>hello</p>

</div>

Answer 2

通过使用clone()jquery 的功能，您可以复制 html 并将其附加到另一个元素中。

前任。:

<div class="container">

  <div class="goodbye">

    Goodbye

    <div class="hello">Hello</div>

  </div>

</div>

$( ".hello" ).html();