原生js在IE7下 向dom添加节点的一个bug, (本例为添加hidden input)

需求是要用js向dom结构增加1个hidden用来存放要post到服务器的数据

var aspnetForm = document.getElementById("aspnetForm"),
      
   //这就是新增的hidden  <input type="hidden" name="test" value="name=jason;age=27;"/>
    hidden = document.createElement("input");

    hidden.name = "test";
    hidden.type="hidden";
    hidden.value = "name=jason;age=27;";

aspnetForm.appendChild(hidden);

这段代码在IE7下无效.

一开始我原以为是下面3句代码IE7不支持， 需要用setAttribute替代 hidden.setAttribute("name", "test");

hidden.name = "test";
hidden.type="hidden";
hidden.value = "name=jason;age=27;";

但是尝试后无效,后来老大提示说这是一个IE7的bug.

解决方法是把hidden 的html拼写到string里面， 然后在hidden的外部套上一层div

<div>
  <input type="hidden" name="test" value="name=jason;age=27;"/>
</div>

// 把input套在div内,再把input的outerHTML设置为div的innerHTML 

最终代码如下:

var forn = $("#aspnetForm")[0],
    container = document.createElement("div"),
    hiddenInput = '<input type="hidden" name="test",value="name=jason;age=27"';

// 将hidden的html string设置为container的innerHTML,然后将div套子添加到page上
container.style.display = "none";
container.innerHTML = hiddenInput;
form[0].appendChild(container)