[英]How to create a div , link and img to another IMG in Javascript
我有這張照片:
<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>
但我不知道如何做其余的代碼。 任何人都可以幫我一把嗎?
謝謝。
以下是您的要求的完整代碼。
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.