javascript - 如何在 Javascript 中创建一个 div 、链接和 img 到另一个 IMG

Question

我有这张照片:

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