動態創建圖像鏈接jquery或香草味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

有幾種方式用純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>

3列弗埃爾

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>

Answer 2

jQuery中使用.append()，您可以追加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>

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