使用简单的 Javascript 在 html 页面中动态添加按钮，无需任何框架或库

Question

嘿，我正在制作一个简单的网页，需要在最后一步下载输出图像文件。但我不知道如何在正确的时间动态添加下载按钮，因为在页面开始时不需要下载按钮..

所以我有 main.js 文件：它看起来像这样：

let img_code=document.getElementById('img_code');
let textbox=document.getElementById('textbox');
let gen_button_img=document.getElementById("img_button");

gen_button_qr.addEventListener("click",()=>
{
 var trailer=textbox.value;
 var url='www.example.com';
 var result= url.concat(trailer);
if (navigator.onLine)
{
    if(trailer.length<=1725 && trailer.length>0)
    {
        if((trailer !="0")&& (trailer.replace(/\s/g, '').length))
        {
            image_code.src=result;
            alert("Image Generated successfully");
      
            
            /**/
        }
        else
        {
            alert("You cannot create this file spaces only or only with single 0");
        }
    
    }
    else
    {
        alert("Maximum charecter limit is exceeded!! ");
    }
}
else
{
    alert("No Internet Connection");
}

});

所以，我有一个问题，有没有办法动态添加将文件 URL 作为输入并通过 Web 浏览器的下载器下载该文件的按钮？

注意=>我可以通过右键单击图片并保存图像选项轻松保存结果； 但我想添加一个额外的按钮来下载相同的文件。

Answer 1

评论中解释的大部分内容，请先阅读

 // arrow function to create and append download button into any element // it only takes url of file that will download. const createBtn = (URL) => { // create button element const downloadBtn = document.createElement("button"); // you can set any name of id according to your choice downloadBtn.setAttribute("id", "downloadBtn"); // create anchor element const downloadLink = document.createElement("a"); // set any thing in inner text downloadBtn.innerText = "Download Image"; // set download attribute to true downloadLink.setAttribute("download", true); // set url with URL downloadLink.setAttribute("href", URL); // append button element into anchor element downloadLink.appendChild(downloadBtn); // get that element in which download button will append const container = document.getElementById("container"); // append download button into any element of your choice container.appendChild(downloadLink); }; // url of file const URL = "https://images.pexels.com/photos/863963/pexels-photo-863963.jpeg?cs=srgb&dl=pexels-blaque-x-863963.jpg&fm=jpg" // call createBtn function with URL createBtn(URL);

 <!-- The element in which download button will be appended --> <div class="container" id="container"></div>

我不是 100% 确定这会奏效！ 它也不适用于堆栈片段，因为 iframe 标记。 尝试在本地使用它。