JavaScript中innerHTML與innerText，createTextNode的區別

innerHTML和innerText

它們都會把元素內內容替換掉，區別在於： innerHTML 會把替換內容里的 HTML 標記解釋執行。 innerText 會把替換內容里的 HTML 標記原樣輸出而不執行。

例如有如下代碼：

var content = "<b>這是對innerHTML和innerText的測試</b>" ; // 假設 e 為網頁內某元素

e.innerHTML = content ; // 顯示結果為  這是對innerHTML和innerText的測試

e.innerText = content ; // 顯示結果為  <b>這是對innerHTML和innerText的測試</b>

 

innerHTML和createTextNode

innerHTML可以識別標簽，而createTextNode會將內容全部轉化為字符串

例如有如下代碼：

var content = "<b>這是對innerHTML和innerText的測試</b>" ; // 假設 e 為網頁內某元素

e.innerHTML = content ; // 顯示結果為  這是對innerHTML和innerText的測試

var text=createTextNode(content) ;

e.appendChild(text)// 顯示結果為  <b>這是對innerHTML和innerText的測試</b>

 

這樣看來innerText和createTextNode的基本用法是一樣的，都無法識別標簽並轉化為html文件。

但是innerText是一次性修改，會將標簽里所有內容修改，createTextNode可以逐條插入，避免整體的修改。