Converting copy to clipboard jQuery code to plain JavaScript

Question

I am converting below jQuery code to plain JavaScript. code pen here and here is the original jQuery version of it.

function CopyToClipboard(value, showNotification, notificationText) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(value).select();
    document.execCommand("copy");
    $temp.remove();
    ....

my code converting it to JavaScript.

function CopyToClipboard(value, showNotification, notificationText) {
    var $temp = document.querySelector("<input>");
    document.body.append($temp);
    $temp.value.select();
    document.execCommand("copy");
    $temp.removeElement();
    ...

this is the error:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '<input>' is not a valid selector.

edited:

function CopyToClipboard(value, showNotification, notificationText) {
    const inputElem = document.createElement('input');
    inputElem.value = value;    
    var $temp = document.querySelector("<input>");
    document.body.append($temp);
    $temp.select();
    document.execCommand("copy");
    document.body.removeChild(el);

Answer 1

Well, for your mentioned part of your code you need to change some more code in your codebase.

• First of you need to know $("<input>") will create an input element, where the equivalent of it in plain javascript is document.createElement("input").
• $temp.val(value).select(); will do two action in one line, first setting the function value parameter input value and last will select the value of that by select(). So to translate it into javascript we need to do this two action like this:

$temp.value = value;
$temp.select();

• And at last you need to remove that input element with remove() instead of removeElement().

The final result will be something like this:

document.querySelector("#copymanager").addEventListener("click", (e) => {
  e.preventDefault();
  CopyToClipboard(document.location.href, true, "Value copied");
});

function CopyToClipboard(value, showNotification, notificationText) {
  var $temp = document.createElement("input");
  document.body.append($temp);
  $temp.value = value;
  $temp.select();
  document.execCommand("copy");
  $temp.remove();

  if (typeof showNotification === "undefined") {
    showNotification = true;
  }
  if (typeof notificationText === "undefined") {
    notificationText = "Copied to clipboard";
  }

  var notificationTag = document.createElement("div");
  notificationTag.className = "copy-notification";
  notificationTag.innerText = notificationText;

  if (showNotification) {
    document.body.append(notificationTag);
    notificationTag.style.display = "block";
    notificationTag.style.transition = "opacity 1s";

    setTimeout(function() {
      notificationTag.style.opacity = "0";
      notificationTag.remove();
    }, 1000);
  }
}

.copy-notification {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 30px;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  margin-top: -30px;
  margin-left: -85px;
  display: none;
  text-align: center;
}

<button id="copymanager">Click to copy to clipboard</button>

Live demo: codepen.io

Answer 2

Here is an example:

copyLink (url) {
    const el = document.createElement('textarea');
    el.value = url;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
},