How Do I Duplicate And Add A Div To Another Div

See more:

Javascript

jQuery

HTML5

Hi I would like some help with this website i am developing. I'm a newbie in web dev.
Anyway what i'm trying to do is to repeat this mark up about 10 times. But for every video element in the new markup it has a different source attribute.

So basically
1. create the markup and add it to another div with an id "content"
2. change the video tags source attribute to a new file (will get sources from .json file)
3. start again.

Here is my markup so far..

<div data-role = "content" id="content" class = "content">
       <div id = MediaPlayer>
           <div class = "Media-Info">
           </div>
            <p id = "1">
                <video onclick="playVideo()" class = VideoElem  >
                    <div  class="Media-Toolbar" data-role = "navbar" data-theme="a" >
                        <ul>
                            <li><a onclick="SpawnVidElement()" href="" data-iconpos="top" data-theme="a">One</a></li>
                            <li><a href="" data-iconpos="top">Two</a></li>
                            <li><a href="" data-iconpos="top">Two</a></li>
                        </ul>
                       </div>
                   <div>
               </div>
              </video>
           </p>
       </div>

The script i have tried using is this

function SpawnVidElement()
{
    var original = document.getElementById('MediaPlayer');
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "MediaPlayer" + ++i;
    clone.onclick = SpawnVidElement;
    document.getElementById("content").append(clone);
}

Thanks in advance