Search code examples
javascripthtmlcopy-paste

How to use JavaScript to copy inner HTML, but without html shorthand?

I have a JS function that dynamically fills the inner HTML of a div with id="code-output" with some sample HTML code:

function outputCode() {
    var style = "<p>#main-container {</p><p class='indent-1'>width: 100%;</p><p>}</p>"

    var body = "<p>&ltdiv id='main-container'&gt</p>" + "<p class='indent-1'>&ltdiv id='header'&gt</p>" + "<p class='indent-2'>&lth1&gtThis is a header 1&lt/h1&gt</p>" + "<p class='indent-1'>&lt/div&gt</p>" + "<p>&lt/div&gt</p>"

    code = "<p>&lt!DOCTYPE html&gt</p>" + "<p>&lthtml&gt</p>" + "<p class='indent-1'>&lthead&gt</p>" + "<p class='indent-2'>&ltmeta charset='utf-8'&gt</p>" + "<p class='indent-2'>&ltmeta name='viewport' content='width=device-width, initial-scale=1'&gt</p>" + "<p class='indent-2'>&lttitle&gtMy HTML Theme&lt/title&gt</p>" + "<p class='indent-2'>&ltstyle&gt</p>" + "<div class='code'>" + style + "</div>" + "<p class='indent-2'>&lt/style&gt</p>" + "<p class='indent-1'>&lt/head&gt</p>" + "<p class='indent-1'>&ltbody&gt</p>" + "<div class='code'>" + body + "</div>" + "<p class='indent-1'>&lt/body&gt</p>" + "<p>&lt/html&gt</p>"

    outputBlock = document.getElementById("code-output");

    outputBlock.innerHTML = code;
}

Everything is static at the moment but I plan to have style and body be defined dynamically. Everything is working fine and the sample HTML code fills into the div as expected.

However, I would like to include a button to copy the sample HTML code to clipboard. I have a function to do this:

function copyHtml() {
    var copyText = document.getElementById("code-output").innerHTML;

    navigator.clipboard.writeText(copyText);

    document.getElementById("copied-message").innerHTML = "Copied";
}

This copies all of the code, but the problem is that it copies with the HTML shorthand and I need it to copy with regular tags (e.g. <html></html>, not &lthtml&gt &lt/html&gt).

Please let me know if there is any way to copy the text without the shorthand?

I have tried the above functions and it ends up copying as &lthtml&gt instead of <html>, for example.

Solution

  • The problem is you're trying to assign a String where you should be assigning an HTML node.

    "innerText" is what you're looking for.

    document.getElementById("copied-message").innerText = "Copied";

    innerHTML is expecting an instance of an element already existing in the DOM. You can test this out by cloning an element already in the DOM and setting the innerHTMl value to the copy of that element.