诡异的innerHTML

今天在现在的项目中，涉及到这样一个案例，我要用innerHTML临时保存一个div中的内容，然后在某种条件满足时，再把这个innerHTML返回给这个div。

 

在这个div中，如果存在有edit的标签，当我重新将保存的内容返回的时候，用Firefox浏览时发现edit里面的内容空空如也！！！

 

同样的应用方式，另外一个div中的edit的内容却能完完整整的恢复，我诧异啊？？？

 

我尝试用IE打开，前后两个div都能正常工作，所有内容都能完璧归赵。

 

赶紧查资料，看代码，最后发现，两个div中的edit的创建方式是不一样的。前一个div是通过createElement创建edit并为之添加各种属性的，代码示意如下：

var edit = document.createElement("input");   
edit.id = name;   
edit.type = "text";   
edit.value = val;   
div.appendChild(edit);  

 

而后一个div则是通过直接加入HTML的方式加入的，示意如下：

var html = "<input type='text' id='" + name + "' value='" + val + "' />";   
div.innerHTML = html;   

 

慢慢的，问题的根源就豁然开朗！不同于M$ IE，在Mozilla Firefox下的innerHTML通过遍历元素的所有节点的tagName还有attrubutes来得到其innerHTML的，因此我们前一个例中的innerHTML得不到改动后的value值。

 

将前一段代码修改如下，则innerHTML在IE和FF下都会通行无阻：

var edit = document.createElement("input");   
edit.id = name;   
edit.setAttribute("type", "text");   
edit.setAttribute("value", name);   
div.appendChild(edit);