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

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

$("#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>

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

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

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

第三级

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

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