javascript - Old input-text-values in div when using innerHTML -

i have javascript/innerhtml-problem. make easier understand have written code:

<div id="testdiv_from"> <input type="text" id="text1" value="13"/> </div>  <div id="testdiv_to"> </div>  <input type="button" onclick="save();"/>  <script> function save() { document.getelementbyid("testdiv_to").innerhtml = document.getelementbyid("testdiv_from").innerhtml; } </script> 

i want copy content in testdiv_from testdiv_to. but: if change value on input text-element 13 14, new value doesn't want "accompany".

do have ideas how transfer new input-text-values , not old ones inside div layer? wrong use innerhtml?

http://jsfiddle.net/r8z55/

if @ input element in developer tools, see input element wrapper of hidden div element, when change value of input element, changes value of hidden div element, , not attribute.

if want copy content of 1 element element, better if use standard dom property/methods, such node.clonenode.

demonstration

function save() {     var divto = document.getelementbyid("testdiv_to"),         divfrom = document.getelementbyid("testdiv_from");     // since, said have multiple input elements want copy,     // should loop through each node , clone it.     [].foreach.call(divfrom.childnodes, function (node) {         // difference between innerhtml , node.clonenode(true)         // clonenode "deep copy", copies hidden element too.         divto.appendchild(node.clonenode(true));      }); } 

fyi: if want copy element, shouldn't add id attribute elements, since id ought unique per document. instead, add class or change id while cloning.