string和createElement创造节点的区别

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

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

window.onload = function () {
        var ele = document.createElement('p');
            ele.className = 'para';
            ele.innerHTML = '点击我弹出';

        ele.onclick = function () {
            alert('yeah you click');
        };

        console.log (Object.prototype.toString.call(ele)); // [object HTMLParagraphElement]
        console.log( typeof ele ); // object 
        console.log( typeof ele.outerHTML ); // string

        document.getElementById('comment').innerHTML =ele.outerHTML  ;
        document.getElementById('comment').appendChild(ele);
    }

 

使用jsfiddle来进行演示