How to Copy Outer HTML Using jQuery or Pure JavaScript

Question

Using First part of following solution I am able to copy value of the input into clipboard. but can you please let me know how about copying HTML like a entire <p>? As you can see I am getting

copyHTML.select is not a function

can you please let me know if this is doable in JS and how I can fix this?

$("#copy").on("click", function(){
      var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
});


$("#copyHTML").on("click", function(){
      var copyHTML = document.getElementById("sample");
  copyHTML.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyHTML.HTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="Hello World" id="myInput">
<button id="copy">Copy text</button>


<p id="sample" class="napper">This is atest Paragraph</p>
<button id="copyHTML">Copy HTML</button>

So...you're looking for the DOM element .outerHTML property? — nnnnnn
– nnnnnn, Commented Nov 5, 2017 at 2:40

Moe kanan · Accepted Answer · 2017-11-05 02:52:32Z

1

This will get you the HTML element.

$("#copyHTML").on("click", function(){
      var copyHTML = document.getElementById("sample");
  copyHTML.select();
  document.execCommand("Copy");
  alert("Copied the HTML (notice the .outerHTML): " + copyHTML.outerHTML);
});

edited Nov 5, 2017 at 2:52

answered Nov 5, 2017 at 2:47

Moe kanan

18912 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JJ BOBO Over a year ago

But I need to copy it to clipboard

Moe kanan Over a year ago

@JJBOBO just updated the answer :) let me know if it works for you!

Aaron West · Accepted Answer · 2024-01-30 01:50:28Z

0

My favorite approach (no jquery):

addEventListener("focus", (event) => 
  navigator.clipboard.writeText(document.body.innerHTML)
  .then(()=>console.log("string copied to clipboard")) );

answered Jan 30, 2024 at 1:50

Aaron West

1952 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to Copy Outer HTML Using jQuery or Pure JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related