How to add FontAwesome icons to button trough JavaScript-CodePudding

I want to add i tag to button. Basically I want to add FontAwesome icon to a button but when I'm adding it, it appears like a string. Here's my code:

<script>
    function Draw_Button() {
        var downloadButton = document.createElement("button");
        downloadButton.textContent = '<i ></i>';
        downloadButton.style.borderRadius = "100%";
        downloadButton.style.backgroundColor = "orange";
        downloadButton.style.width = "50px";
        downloadButton.style.height = "50px";
        downloadButton.style.fontSize = "14px";
        downloadButton.style.position = "relative";
        downloadButton.style.float = "right";
        downloadButton.style.bottom = "55px";
    }
</script>

CodePudding user response：

Perhaps use .innerHTML instead of text content. As textContent outputs a string, but you want to include html

CodePudding user response：

You have to use .innerHTML. See the code below

downloadButton.innerHTML = "<i class='fa-solid fa-arrow-down-to-line'></i>";

don't forget to append the button to your document body

document.body.appendChild(downloadButton);