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

【问题标题】：Dynamically creating image link Jquery or vanilla Javascript动态创建图像链接 Jquery 或 vanilla Javascript
【发布时间】：2017-08-01 20:12:32
【问题描述】：

我正在尝试弄清楚如何动态创建带有标题的图像。我希望这样当用户单击图像或标题时，它会重定向到不同的页面。我感觉我所做的事情在很多层面上都是错误的。

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

【问题讨论】：

innerHTML 不是一种方法
将 innerHTML 更改为 appendChild ;)
data 参数的目的是什么？
传入包含图像详细信息的已解析 JSON 数据
我正在使用方括号，而智能感知显示 innerHTML 是一种方法，这就是我尝试使用它的原因。

标签： javascript jquery

【解决方案1】：

在jquery中使用.append()，可以在需要的div中追加image标签。

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

<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>

【讨论】：

【解决方案2】：

按照你想要的创意，我做了以下事情：

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

【讨论】：

【解决方案3】：

有几种方法可以使用纯 JS 或框架 (jquery..)。

纯js：

1 级简单

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

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

二级

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

&lt;div id="demo"&gt;&lt;/div&gt;

第三层

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

&lt;div id="demo"&gt;&lt;/div&gt;

【讨论】：