javascript - Can't insert a div into another internal div -

i need solve problem have. have code:

<div id="div1" >     <div id="edit1">        hello        <input type="button" id="b1" onclick="aaa()"/>     </div> </div> 

i want use insert internal div (id=edit1) new div generated.

i tried alike code it's not running:

js: function aaa() {    var elem = createdivline();    var el1 = document.getelementbyid("div1");    var el2 = el1.getelementbyid("edit1");    el2.appendchild(elem); }  function createdivline() {    var tempdiv1 = document.createelement("div");    tempdiv1.innerhtml = "sam";    return tempdiv1; } 

the result should looks this:

<div id="div1" >     <div id="edit1">        hello        <input type="button" id="b1" onclick="createdivtable()"/>        <div>"sam"</div>     </div> </div> 

jsfiddle: http://jsfiddle.net/kknxf/

since ids unique, not valid attempt element's children id.

remove line:

var el1 = document.getelementbyid('div1'); 

and change following line to:

var el2 = document.getelementbyid('edit1'); 

in event have irrepairably (i can never spell word...) broken html can't possibly change, try this:

var el2 = document.queryselector("#div1 #edit1");