Implement copy-on-click using JavaScript

In this article, we learn how to copy content on particular div means using div id. “Copy div innerhtml to clipboard JavaScript”

Source Code:-

<fieldset style="width:350px;">

                <legend>Copy div innerhtml to clipboard JavaScript

                </legend>

       

            <div id="divcopyid">

                <h3>Our greatest weakness lies in giving up. The most

                certain way to succeed is always

                to try just one more time.</h3>

            </div>

            <a href="#" id="copy" onclick="copyText()">Copy</a>

    </fieldset>

JavaScript:

<script type="text/javascript">

    function copyText() {

        let diva = document.getElementById('copy');

        diva.innerText = "Copied";

        let div = document.getElementById('divcopyid');

        let text = div.innerText;

        let textArea = document.createElement('textarea');

        textArea.width = "1px";

        textArea.height = "1px";

        textArea.background = "transparents";

        textArea.value = text;

        document.body.append(textArea);

        textArea.select();

        document.execCommand('copy');

        document.body.removeChild(textArea);

    }

</script>

 

Out-Put:

Copy div innerhtml to clipboard JavaScript

Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.

Copy