使用appendChild巧妙解决火狐下innerHTML无法沿用input数据问题
canrun
今天做一个模块的时候碰到了一个问题：使用innerHTML追加数据的时候导致已填写的input数据丢失，这个问题对于jQuery的append来说是不会存在问题的，但是现在并没有引用jQuery，因此，怎样才能让数据追加到指定div的末端呢？我想到了appendChild方法，但是appendChild的处理对象是一个Element，直接将html标签作为参数是不行的，因此为了能够成功追加数据，我只好退而求其次，将html标签使用innerHTML包含进一个新建的Element中，然后将这个Element使用appendChild方法追加到div中，就这样，问题解决了，新追加的数据并不会影响当前div已有的数据。下面是innerHTML直接追加与appendChild解决追加问题的源码：
1 <!DOCTYPE> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>js innerHTML append data</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta http-equiv="Content-Language" content="zh-CN" /> 7 </head> 8 <body> 9 解决问题：使用container_innerHTML，输入数据在新添加时丢失；使用container_appendChild则不会。 10 <br/> 11 存在不足：使用container_appendChild的每一个input都被一个div包含着。 12 <br/> 13 container_innerHTML:<div id="container_innerHTML"></div> 14 <br/> 15 container_appendChild:<div id="container_appendChild"></div> 16 <input type="button" value="添加" id="add"></input> 17 <script type="text/javascript"> 18 var tpl = '<input type="text" value=""/>'; //这里只是一个简单的input，还可以是很多很多标签集合，因此我没有直接使用createElement('input')进行appendChild 19 document.getElementById('add').onclick = function(){ 20 //container_innerHTML 21 document.getElementById('container_innerHTML').innerHTML += tpl;
//新增，通过存储数据也能实现数据的沿用，不过没有appendChild来的方便。
//container_innerHTML
var inputs = document.getElementById('container_innerHTML').getElementsByTagName('input');
var storeInputs = [];
//存储input的数据
for(var i=0;i<inputs.length;i++){
storeInputs[i] = inputs[i].value;
}
document.getElementById('container_innerHTML').innerHTML += tpl;
//还原input的数据
for(var i=0;i<inputs.length-1;i++){
inputs[i].value = storeInputs[i];
}
22 23 //container_appendChild 24 var div = document.createElement('div'); 25 div.innerHTML = tpl; 26 document.getElementById('container_appendChild').appendChild(div); 27 } 28 </script> 29 </body> 30 </html>
