dynamically adding a button in html page with simple Javascript without any framework or library-CodePudding

hey there i'm making a simple webpage which requires to download an output image file at the last step.. but i don't know how can i add download button dynamically at correct time, because at starting of a page there is no need of download button..

so i have main.js file: which looks something looks like this:

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");
}

});

So, i have the question is there any way to dynamically add the button which takes file URL as input and download that file through web browser's downloader?

Note=> I can easily save the result by right click on the picture and save image option; but i want to add an extra button to download the same file.

CodePudding user response：

Most of the things explained in comments so read it first

// 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  id="container"></div>

I am not 100% sure that this will work! It also not work in stack snippet because iframe tag. Try to use it locally.