1.在html中新增加一個節點或者是改變某個節點的內容

注意：innerHTML與innerText的區別：前者的html標籤會被瀏覽器識別，後者則是當做text的，標籤不會被識別。

例子：（任務17程式碼片段）

function renderAqiList() {
	var itemHTML= "<tr><td>城市</td><td>空氣質量</td><td>操作</td></tr>";
	
	for(var item in aqiData){
		itemHTML+="<tr><td>" + item + "</td><td>" + aqiData[item] + "</td><td><button> \
		刪除 </button></td></tr>";
	}
	aqitable.innerHTML=itemHTML;
}
 

註釋：這裡是在table裡面增加了<tr>標籤內容,渲染表格。

createElement->createTextNode->appendChild(->appendChild)或者createElement->innerText(->appendChild)

例子：

<pre name="code" class="javascript"><span style="font-size:14px;">var btn=document.createElement("BUTTON");
</span>

<span style="font-size:14px;">var btn=document.createElement("BUTTON");
btn.innerText="click me";</span>

ps：還有一種建立虛擬節點（建立文件碎片節點）的方法createDocumentFragment()

這是考慮到當要新增大量的節點的時候，如果直接新增新節點，速度會比較慢。所以可以先建立文件碎片，把資料一起寫入它，然後appenChild到原始html裡面。

用法與之前類似

例：（任務18程式碼片段）

<pre name="code" class="javascript"><span style="font-size:14px;">    

var fragment = document.createDocumentFragment();
    numQueue.innerHTML="";
    for (var i=0;i<arr.length;i++){
        var number=arr[i];
        var node = document.createElement("span");
        node.innerText=number;
        node.id =i;
        fragment.appendChild(node);
        //建立一個虛擬節點
    }
    numQueue.appendChild(fragment);</span>

其實我每次解決類似的問題時，總會忘記怎麼寫，來來好好記一下。

例子（任務18程式碼片段）：

function randomOut(event) {

    event = event||window.event;
    var target = event.target||event.srcElement;
    var index = target.getAttribute("id");
    if(target.tagName.toLowerCase()=="span") {
        // alert(target.tagName);
        arr.splice(index, 1);
        render();
    }
    return 0;
}
numQueue.onclick = randomOut;