Duplicate html with Javascript below the original element -

i able figure out how duplicate html javascript. however, can't figure out how duplicate html directly below original duplicated html. right going bottom of page.

here html:

<div id="duplicater">      duplicate inside div </div> <button id="button" onlick="duplicate()">click me</button> <div class="blank">     duplicated info should stay above this. </div> 

here javascript:

document.getelementbyid('button').onclick = duplicate;   var = 0; var original = document.getelementbyid('duplicater');  function duplicate() {     var clone = original.clonenode(true); // "deep" clone     clone.id = "duplicetor" + ++i; // there can 1 element id     original.parentnode.appendchild(clone); } 

fiddle http://jsfiddle.net/kxmpy/803/

i'd suggest, in place of appendchild(), using insertbefore():

original.parentnode.insertbefore(clone, original.nextsibling); 

js fiddle demo.

you use insertadjacenthtml(), though frankly it's little convoluted in case (since requires string of html, rather dom node insert):

original.insertadjacenthtml('afterend',clone.outerhtml); 

js fiddle demo.

references:

• element.insertadjacenthtml().
• node.insertbefore().
• node.nextsibling.