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); }
i'd suggest, in place of appendchild()
, using insertbefore()
:
original.parentnode.insertbefore(clone, original.nextsibling);
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);
references:
Comments
Post a Comment