如何在Javascript

Question

創建一個div，鏈接和IMG另一個IMG我看到這樣的畫面：

<img src="cards.png" id="img"> <!--CARD PICTURE--> 

這正是我需要的：

<div class="container_img"> 
    <img src="cards.png" id="img"> <!--CARD PICTURE--> 
    <div class="share_container"> 
     <a href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" target="_blank"> 
      <img src="http://emmanuelorozco.com/shareFacebook.png" class="shareButtonMedia"> 
     </a> 
     <a href="http://twitter.com/share?u=http://google.com" target="_blank"> 
      <img src="http://emmanuelorozco.com/shareTwitter.png" class="shareButtonMedia"> 
     </a> 
    </div> 
</div> 

正如你所看到的，它是相同的圖片，但添加了一些div，鏈接和其他圖片。

我想這是什麼：

var img = document.getElementById("img"); 
var par = img.parentNode; 
var div = document.createElement("div"); 
var shareLinks = document.createElement("a"); 

par.insertBefore(div,img); 
div.appendChild(img); 
div.setAttribute("class","container_img"); 
div.appendChild(img); 

，並返回我：

<div class="container_img"> 
    <img src="cards.png" id="img"> <!--CARD PICTURE--> 
</div> 

，但我不能找出如何做好代碼的其餘部分。任何人都可以幫我一把嗎？

謝謝。

Answer 1

以下是您的需求的整個代碼。

DEMO

var img = document.getElementById("img"); 
var par = img.parentNode; 
var div = document.createElement("div"); 
var shareLinks = document.createElement("a"); 

par.insertBefore(div,img); 
div.appendChild(img); 
div.setAttribute("class","container_img"); 
div.appendChild(img); 

//UPDATE img4 and img5, 
// as many as image you want, you should create more elements. 
// it woudl be good if we define funciton for this. 
var img4 = document.createElement("img"); 
img4.setAttribute("src", "http://emmanuelorozco.com/shareFacebook.png"); 
div.appendChild(img4); 

var img5 = document.createElement("img"); 
img5.setAttribute("src", "http://emmanuelorozco.com/shareTwitter.png"); 
div.appendChild(img5); 

var anotherDiv = document.createElement("div"); 
anotherDiv.className = "share_container"; 

var anchor = document.createElement("a"); 
anchor.setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=http://google.com"); 
anchor.setAttribute("target", "_blank"); 

var img2 = document.createElement("img"); 
img2.setAttribute("src", "http://emmanuelorozco.com/shareFacebook.png"); 
img2.setAttribute("class", "shareButtonMedia"); 
anchor.appendChild(img2); 

anotherDiv.appendChild(anchor); 
div.appendChild(anotherDiv); 


var anchor2 = document.createElement("a"); 
anchor2.setAttribute("href", "http://twitter.com/share?u=http://google.com"); 
anchor2.setAttribute("target", "_blank"); 

var img3 = document.createElement("img"); 
img3.setAttribute("src", "http://emmanuelorozco.com/shareTwitter.png"); 
img3.setAttribute("class", "shareButtonMedia"); 
anchor2.appendChild(img3); 

anotherDiv.appendChild(anchor2); 
div.appendChild(anotherDiv); 
document.getElementById('container').appendChild(div);