Question

我想弄清楚如何动态创建一个带有标题的图片。我希望这样当用户点击图片或标题时，它会重定向到不同的页面。我觉得我在做的事情在很多层面都是错误的。

function createFrame(data){
    // <div><a href=""><img src=""><div></div></img></a></div>
    var div = document.createElement('div');
    var a = document.createElement('a');
    var img = document.createElement('img'); 
    a = a.innerHTML(img);
    div.innerHTML(a);
    return div;
});

Answer 1

在jquery中使用.append()，您可以将image标记附加到所需的div中。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用纯JS或框架（jquery ..）有几种方法可以做到这一点。

Pure js：

1级简单

＆＃13;

function createFrame(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");

＆＃13;

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

＆＃13;

第二级

＆＃13;

document.getElementById("demo").innerHTML = createFrame("http://lorempixel.com/100/100");

function createFrame(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;
}

＆＃13;

<div id="demo"></div>

＆＃13;

第3级

＆＃13;

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;




function createFrame(img={}, a={}, div={}){
  var html = "";
  html  = TagGenerator("img", img, "",true);
  html  = TagGenerator("a", a, html);
  html  = TagGenerator("div", div, html);
 return html;
}



function TagGenerator(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;
}

＆＃13;

<div id="demo"></div>

＆＃13;

Answer 3

按照你想要的创意，我做了以下几点：

function createFrame(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);
});

动态创建图像链接Jquery或vanilla Javascript

3 个答案: