<body><p>第1行内容</p> <p>第2行内容</p> <p>第3行内容</p> </body>
原生：
<script> var appendhtml=document.createElement("p"); appendhtml.innerHTML="这是插入的内容"; document.body.appendChild(appendhtml); var nodep=document.getElementsByTagName("p"); for (var i=0;i<nodep.length;i++){ nodep[i].onclick=function(){ console.log("Click Event!"); } } </script>
注：事件绑定需在创建节点之后，如在创建之前绑定则无法获取新创建的节点；
<body>
<div id="treeList">
<div class="canvas"></div>
</div>
</body>
jQuery：
第一种：将pdom添加到canvas标签中后设置属性和绑定事件
var pdom='<p>hehe</p>'
$(pdom).appendTo('#treeList .canvas').css('background','red').click(function (e) {
console.log(e);
console.log($(this).text()); //直接获取当前元素的内容
})
第二种：待新元素创建好后获取所有元素绑定元素；
$('p').click(function (e) {
console.log(e);
})
第三种:事件委托，利用事件冒泡在父元素执行delegate函数
$('#treeList .canvas').delegate('p','click',function (e) {
console.log(e.currentTarget.innerHTML);
})
第四种:事件委托，利用事件冒泡在父元素执行on函数
$('#treeList .canvas').on('click','p',function (e) {
console.log(e.currentTarget.innerHTML);
})
第五种：bind方法和live方法（因jQuery版本不同，可能其中的方法不存在，1.7之后的版本基本都被on方法替代了）
$('p').bind('click', function() {
console.log($(this).text());///注意，用live还可以这样写，结果是正常的
console.log("haha");
});
第六种：在元素中拼接方法（不建议传参！）
$("<li onclick='show()'>Hello</li>").appendTo("#d2");
function show() {
alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
alert("哈哈");
}