Copy to clipboard without appending textarea

Question

I have the following code for chrome addon's js to copy some certain data to clipboard from a certain webpage(I will write code to get data from the webpage later).

 // 1. Create the button var testButton = document.createElement("button"); testButton.innerHTML = "Copy"; // 2. Append somewhere var btnPos = document.getElementsByClassName("menu-userdetails")[0]; btnPos.appendChild(testButton); // 3. Add event handler testButton.addEventListener ("click", copyToClipboard); function copyToClipboard() { var textArea = document.createElement("textarea"); textArea.value = "test copying"; btnPos.appendChild(textArea); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } document.body.removeChild(textArea); } 

In this code I have to append the text area to the webpage(after button click) before copying it. But I don't want the textarea to be shown I want to just copy the data inside the textarea without displaying the textarea.

Answer 1

 textArea.style.height = "0px"; textArea.style.width = "0px"; textArea.style.opacity = "0"; 

Adding this code hides the text area.

But even better solution was already in my code, I just made a little mistake in it. I wrote

 document.body.removeChild(textArea); 

While actually I had to write

 btnPos.removeChild(textArea); 

this removes the text area after copying and its so fast that you can't even see the text area appear and disappear.