innerHTML 和 createElement的冲突

如下代码，Element.appendChild(oelement)之后，如果再用innerHTML += "xxx"的话，则oelement的事件就无效(下例中，xxxxx的onclick事件无效)<script type="text/javascript" language="javascript">
  window.onload = function() {
    var aaa = document.getElementById("aaa");
    aaa.innerHTML += "<h4>skdjflkj</h4><br />";
    var oButton = document.createElement("INPUT");
    oButton.type = "button";
    oButton.value = "xxxxx";
    oButton.onclick = function() {
      this.nextSibling.click();
    };
    aaa.appendChild(oButton);
    aaa.innerHTML += "<input type=\"button\" value=\"button\" onclick=\"alert('xxx')\" />";
  };
</script>
<div id="aaa"></div>如果把它改成<script type="text/javascript" language="javascript">
  window.onload = function() {
    var aaa = document.getElementById("aaa");
    aaa.innerHTML += "<h4>skdjflkj</h4><br /><input type=\"button\" value=\"button\" onclick=\"alert('xxx')\" />";
    var oButton = document.createElement("INPUT");
    oButton.type = "button";
    oButton.value = "xxxxx";
    oButton.onclick = function() {
      this.previousSibling.click();
    };
    aaa.appendChild(oButton);
  };
</script>
<div id="aaa"></div>这样xxxx的onclick就正常，但是有时候想在中间的控件添加事件啊...而且事件无法直接写成字符串形式，那此时该怎么写呢？？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

document.getElementById("").onclick=function(){//动态加事件}
<script type="text/javascript" language="javascript">
  window.onload = function() {
    var aaa = document.getElementById("aaa");
    aaa.innerHTML += "<h4>skdjflkj</h4><br />";
    var oButton = document.createElement("INPUT");
    oButton.type = "button";
    oButton.value = "xxxxx";
    aaa.appendChild(oButton);
    aaa.innerHTML += "<input type=\"button\" value=\"button\" onclick=\"alert('xxx')\" />";
    aaa.childNodes[2].onclick = function() {
      this.nextSibling.click();
    };  };
</script>
<div id="aaa"></div>
楼上的都会错意了...
我只是把代码简单化，因为有很多内容，想动态添加到一个DIV层里，里面的内容基本上都可以用字符串来表示，但其中有些必须注册事件的按钮什么的，不想通过ID这类的来注册事件(也就是说，不想通过document.getElementById("abc").onclick = function(){xxx} 这样的形式来注册事件)，而这些要注册事件的对象又基本上在添加的内容中间...如果从头到尾都用document.createElement("XXX")这样来动态添加，那太麻烦了...
楼主的第一段代码其实也可以实现的，只是你的顺序写错了。
只要把aaa.innerHTML += "<input type=\"button\" value=\"button\" onclick=\"alert('xxx')\" />";写在aaa.appendChild(oButton);前面就可以了。
因为你aaa.appendChild(oButton);好的时候，这个按钮后面还没有元素啊。所以this.nextSibling.click();根本就无效
不行的，我试过了
至少在IE8下不行
http://friendlybit.com/js/manipulating-innerhtml-removes-events/
上面的链接也是在讨论这问题的，就是var oo = document.createElement完，obj.appendChild之后，如果出现 obj.innerHTML += "xxx"的话，则会把obj的所有子元素都当成字符串来处理，所以之前oo的事件都被删除了...
我之前为document.body对象添加元素的时候，就是用了innerHTML，结果页面里的所有事件都失效了
下面的代码，在未点击innerHTML按钮前，TABLE中元素的事件都是正常的，用innerHTML为document.body添加内容后，所有的事件立即失效...
<script type="text/javascript" language="javascript">
  window.onload = function() {
    var tbody = document.getElementById("tab").tBodies[0];
    var b = 0;
    for(var i = 0 ; i < tbody.rows.length; i++) {
      if(b) {
        tbody.rows[i].style.backgroundColor = "#ddd";
        tbody.rows[i].onmouseover = function() { this.style.backgroundColor = "#abc"; };
        tbody.rows[i].onmouseout = function() { this.style.backgroundColor = "#ddd"; };
        b = 0;
      } else {
        tbody.rows[i].onmouseover = function() { this.style.backgroundColor = "#abc"; };
        tbody.rows[i].onmouseout = function() { this.style.backgroundColor = "#fff"; };
        b = 1;
      }
      tbody.rows[i].ondblclick = function() {alert(this.rowIndex);};
    }  };
</script>
<body>
<table id="tab">
  <thead>
    <tr>
      <th width="200px">ID</th>
      <th width="200px">NAME</th>
      <th width="200px">AGE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
  </tbody>
</table>
<input type="button" value="innerHTML" onclick="document.body.innerHTML += '<div>aa</div>'" />
</body>
...我说的所有事件立即失效，指的是像上面的代码中，用脚本注册事件的事件才会失效，如果像innerHTML按钮那样直接写在属性里的，则不会(如，上面的代码，innerHTML一直点击，会重复添加div)
<script type="text/javascript" language="javascript">
  window.onload = function() {
    var tbody = document.getElementById("tab").tBodies[0];
    var b = 0;
    for(var i = 0 ; i < tbody.rows.length; i++) {
      if(b) {
        tbody.rows[i].style.backgroundColor = "#ddd";
        tbody.rows[i].onmouseover = function() { this.style.backgroundColor = "#abc"; };
        tbody.rows[i].onmouseout = function() { this.style.backgroundColor = "#ddd"; };
        b = 0;
      } else {
        tbody.rows[i].onmouseover = function() { this.style.backgroundColor = "#abc"; };
        tbody.rows[i].onmouseout = function() { this.style.backgroundColor = "#fff"; };
        b = 1;
      }
      tbody.rows[i].ondblclick = function() {alert(this.rowIndex);};
    }
    //用这样注册的事件，在innerHTML += "xxx" 后，事件就失效了
    //document.getElementById("add").onclick = function() { document.body.innerHTML += "<div>aa</div>"; };
  };  function addHTML() {
    document.body.innerHTML += "<div>aa</div>";
  }
</script>
<body>
<table id="tab">
  <thead>
    <tr>
      <th width="200px">ID</th>
      <th width="200px">NAME</th>
      <th width="200px">AGE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
    <tr>
      <td>1</td>
      <td>xx</td>
      <td>22</td>
    </tr>
  </tbody>
</table>


<input type="button" id="add" value="innerHTML" onclick="addHTML()" />
</body>
这个已是事实，不管在哪个浏览器，document.body.innerHTML += "<div>aa</div>";
这个方法追加了任何元素都会导致页面的所有事件失效，如果要保持原样，除了再加载一次事件外，好象没有更好的方法了！
innerHTML后，页面DOM重构，导致注册事件失效。
可以使用obj.insertAdjacentHTML("afterBegin",str);来代替。
注意：innerHTML还有obj.insertAdjacentHTML("afterBegin",str);Firefox都不支持
innerHTML FF是支持的吧？？我记得是innerText才不支持
innerHTML会导致容器的内容重新加载,容器内的元素事件都消失了.
用这种方法吧:
document.body.appendChild(document.createTextNode("你要插入的字符"));
这只能插入字符
如果要插入类似
"<input type=\"button\" value=\"Click\" />"
这样的字符串的话，则显示为
<input type="button" value="Click" />