使用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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架