關於javascript中動態建立的節點怎麼繼續使用原方法。

　　常常會在寫代碼的時候碰到一個問題，新建立的DOM節點不能像html中已經寫好的節點同樣使用已給定的樣式，也不能使用已經給定的方法，我總結的幾個方法以下：

---

1.最基本的解決方式是事件委託，將事件委託給它的父元素，而後在使用target指向目標元素；

　　　　window.onload=function(){

　　　　　　let ul=document.getElementsByTagName("ul");　　　　　　

　　　　　　let li=document.getElementsByTagName("li");

　　　　　　ul.onclick=function(e){

　　　　　　　　let evt=e || window.event;

　　　　　　　　let target = evt.target || evt.srcElement;

　　　　　　　　if(target.nodeName == "li"){

　　　　　　　　　　alert("11111");

　　　　　　　　}

　　　　　　}

　　　　}

這樣不管是已經給定的 li 仍是動態添加的 li 均可以點擊彈出 11111 了。

---

2.在綁定方法時，直接在動態生成的DOM裏添加上onclick方法；

HTML：ul.appendChild( `<li  onclick="fun(this)"></li>` ),使用了模板字符串；

JS：function fun(a){

　　　　a.style.backgroundColor="red";

　　}

這樣新添加的 li 在點擊時背景色會變紅；

---

3.jquery方法：on( )，相似於事件委託,給父元素綁定事件點擊子元素觸發；

HTML：ul.appendChild( `<li></li>` ).

JS：$("ul").on("click" , "li" , function(){

　　　　$("li").css("background","red");

　　})

這樣新添加的 li 在點擊時背景色會變紅；