0

Here is a <div> which functions as a markdown to html converter, the inner html of which is variable:

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

I want to make a javascript function which copies (to the clipboard) the inner html of the <div>, together with a stylesheet for the div: (note: the stylesheet is not variable)

<style>
html {
font-size: 13px; 
line-height: 1.5; 
padding:60px;
}
 <!-- and many more... -->
</style>

The expected copied result is as follows;

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

What script is needed to achieve this? Copying the result through window prompt alert is also fine.

jack
  • 305
  • 1
  • 8
  • What have you tried so far? – Axel Moriceau Oct 20 '20 at 07:18
  • @AxelMoriceau A javascript which downloads the inner html of the `
    `(without stylesheet) as an html file is already done, which is not so convenient to use. This is why I'm trying to copy the code instead of downloading it.
     – jack Oct 20 '20 at 07:22
  • Am I missing something here? `var style=""; return style + $("#markdown").html();` What do you mean by "copies the html" - do you mean to the clipboard? Or just into a variable (.html())? Or to somewhere else on the page (.clone())? Please clarify. – freedomn-m Oct 20 '20 at 07:41
  • 1
    @freedomn-m to the clipboard. I should have pointed that out. – jack Oct 20 '20 at 07:43
  • https://stackoverflow.com/search?q=%5Bjavascript%5D+copy+to+clipboard – freedomn-m Oct 20 '20 at 07:45
  • Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – freedomn-m Oct 20 '20 at 07:45
  • @freedomn-m no, let's put it this way; I'm looking for a way to copy the html elements inside a `
    ` to the clipboard, not just the displayed raw texts but the html tags as well. I want this to be done in any way that is possible, such as by clicking a button, or displaying a window prompt alert.
     – jack Oct 20 '20 at 07:50
  • So... `alert(html);`? – freedomn-m Oct 20 '20 at 07:59

2 Answers2

1

you can make use of jQuery here, use below script where you can read HTML of markdown div along with css script

$(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>
Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57
-1

by using clone() function of jquery you can copy the html and append it in another element.

Ex. :

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

$( ".hello" ).html();
sandip bharadva
  • 629
  • 1
  • 6
  • 19