string和createElement创造节点的区别

weixin_30709061

于 2012-10-20 16:19:00 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzu-han/archive/2012/10/20/2732246.html

本文探讨了通过 createElement 创建元素并附加事件后，在将元素 outerHTML 插入页面时导致事件丢失的问题。并通过实例展示了如何复现这一现象。

最近遇见这个问题比较多，拿出来分享一下.

场景：createElement创造一个li节点，加上了事件，然后因为某些原因，没事直接插入，而获取其outerHTML，然后插入到网页中，此时添加的事件就会失效。

 1 window.onload = function () {
 2         var ele = document.createElement('p');
 3             ele.className = 'para';
 4             ele.innerHTML = '点击我弹出';
 5 
 6         ele.onclick = function () {
 7             alert('yeah you click');
 8         };
 9 
10         console.log (Object.prototype.toString.call(ele)); // [object HTMLParagraphElement]
11         console.log( typeof ele ); // object 
12         console.log( typeof ele.outerHTML ); // string
13 
14         document.getElementById('comment').innerHTML =ele.outerHTML  ;
15         document.getElementById('comment').appendChild(ele);
16     }