复制 JavaScript 中的元素内容

Question

I'm trying to write JS code that can copy the content of a td and, at the same time, shows some kind of notification to let the user know that something has been copied to the clipboard. I tried the following code and the copying to clipboard works fine, but the notification never worked. What should I do?

PHP and HTML:

echo "<td onClick='copy(this),selectThis(this)'> " . $row['email'] . "</td>";

JS:

<script type="text/javascript">
    function copy(that){
        var inp =document.createElement('input');
        document.body.appendChild(inp)
        inp.value =that.textContent
        inp.select();
        document.execCommand('copy',false);
        inp.remove();
    }
    function selectThis(element) {
        document.createElement("input")).style.backgroundColor = "red";
    }
</script>

Answer 1

 'use strict'; function copy(that){ //... notify(that.textContent); } function notify(content) { let notification = document.createElement('span'); notification.classList.add('notification'); notification.textContent = `"${content}" copied`; document.body.prepend(notification); setTimeout(() => notification.remove(), 4000); }

 .notification { border: solid 1px green; padding: 5px; animation-name: fade; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; } @keyframes fade { from { opacity:0; } to { opacity:1; } }

 <p onclick="copy(this)" id="element" >Click here to copy this text (figuratively).</p>