Dynamically Creating Image Link Jquery Or Vanilla Javascript

I am trying to figure out how to dynamically create a image with caption below it. I would like it so that when a user clicks the image or caption it redirects to a different page.

Solution 1:

Using .append() in jquery, you can append the image tags in the desired div.

$("#btn").click(function(){
  $("#imgDiv").append('<a href="#" target="_blank"><img src="" alt="Image"/></a>')
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="btn">Create Image Link</button><divid="imgDiv"></div>

Solution 2:

Following your idea of creat that you want, i did the following:

functioncreateFrame(data){
// <div><a href=""><img src=""><div></div></img></a></div>var div = document.createElement('div');
 var a = document.createElement('a');
 a.href = 'your-href-link';
 var img = document.createElement('img'); 
 img.src  = 'your-src-link';
 var div_caption = document.createElement('div');
 a.appenchild(img);
 a.appenchild(div_caption);
 div.appenchild(a);
});

Solution 3:

There are several ways to do it with pure JS or with frameworks (jquery..).

Pure js :

Level 1 simple

functioncreateFrame(src){
  return"<div>"+
            "<a href='"+src+"' target='_blank'>"+
              "<img src='"+src+"' alt='demo'/>"+
            "</a>"+
          "</div>";
}

document.getElementById("demo").innerHTML = createFrame("http://lorempixel.com/100/100");

<divid="demo"></div><br/>

2nd Level

document.getElementById("demo").innerHTML = createFrame("http://lorempixel.com/100/100");

functioncreateFrame(src=false, divID = false, link=false, aID=false, imgID=false, openToNewTab = false){
  $html = "";

  $html += "<div ";
  if(divID !== false) $html += "id = '"+divID+"' ";
  $html += ">";
  $html += " <a href='";
  $html += (link !== false)? link+"' ":"#' ";
  $html += (openToNewTab !== false)? " target='_blank'":"";
  $html += ">";
  $html += "<img src='"+src+"' ";
  $html += imgID? " id='"+imgID+"'":"";
  $html +=  " /></a></div>";
 return $html;
}

<divid="demo"></div>

3rd Level

var html = createFrame(
                      {"src":"http:lorempixel.com/100/100", "id":"img"},// img attributes
                      {"href":"http:lorempixel.com/100/100", "class":"caption", "target":"_blank"}, // a attributes
                      {"class":"imgContainer"}//div
                      );
document.getElementById("demo").innerHTML = html;




functioncreateFrame(img={}, a={}, div={}){
  var html = "";
  html  = TagGenerator("img", img, "",true);
  html  = TagGenerator("a", a, html);
  html  = TagGenerator("div", div, html);
 return html;
}



functionTagGenerator(tagname, attr=[], html="", endAbleTag=false){
  var tag = "<"+tagname+" ", i;
  for (i in attr)
     tag += i+"='"+attr[i]+"' ";
  if(!endAbleTag) tag += ">"+html+" </"+tagname+">";
  else tag += "/>";
  return tag;
}

<divid="demo"></div>