Javascript: Load an Image from url and display
When the button is clicked, get the value of the input and use it to create an image element which is appended to the body (or anywhere else) :
<html><body><form> <input type="text" id="imagename" value="" /> <input type="button" id="btn" value="GO" /></form> <script type="text/javascript"> document.getElementById('btn').onclick = function() { var val = document.getElementById('imagename').value, src = 'http://webpage.com/images/' + val +'.png', img = document.createElement('img'); img.src = src; document.body.appendChild(img); } </script></body></html>the same in jQuery:
$('#btn').on('click', function() { var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'}); img.appendTo('body');});
Are you after something like this:
<html> <head> <title>Z Test</title> </head> <body><div id="img_home"></div><button onclick="addimage()" type="button">Add an image</button><script>function addimage() { var img = new Image(); img.src = "https://www.google.com/images/srpr/logo4w.png" img_home.appendChild(img);}</script></body>
Add a div with ID imgDiv and make your script
document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'I tried to stay as close to your original as tp not overwhelm you with jQuery and such