Simple DOM cloneNode issue -

im having rather simple issue using clonenode. i'm trying duplicate li node own ul using java , can't seem find why not working. have tried multiple things cant life of me figure out. want this:

                        <ul id="mylist">                             <li><h3>my image:<img src="myimage.png"></h3></li>                         </ul>  

to this:
<ul id="mylist"> <li><h3>my image:<img src="myimage.png"></h3></li> <li><h3>my image:<img src="myimage.png"></h3></li> </ul>

i using function:

                        function myfunction(){                                     parent=document.getelementbyid("mylist");                                     child=parent.getelementbytagname("li")[0];                                     clone= child.clonenode(true);                                     parent.insertbefore(clone,child);                            }                          </script> 

unsure why not working, pulled code identically online source. if newbie question appreciate it.

i find when copying javascript inter-rent, author has never checked code typing errors or maybe they're deliberate encourage bit of understanding.

this works:

<ul id="myawesomelist">   <li id="x"><h3>my awesome image:<img src="myawesomeimage.png"></h3></li> </ul> 

and here's javascript:

function myawesomefunction() {  var myawesomeparent=document.getelementbyid('myawesomelist');  var myawesomechild=myawesomeparent.getelementsbytagname('li')[0];  var myawesomeclone=myawesomechild.clonenode(true);  myawesomeparent.insertbefore(myawesomeclone,myawesomechild); } 

and here's fiddle built in:

http://jsfiddle.net/g51n8sor/