How to create a div , link and img to another IMG in Javascript

Question

I have this picture:

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

This is what I need:

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

As you can see, it is the same picture, but with some divs, links and another pictures added.

What I tried is this:

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

And it returns me this:

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

But I cant find out how to do the rest of the code. Can anyone give me a hand?

Thanks.

Answer 1

Here is the whole code for your requirement.

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