createTextNode和innerHTML區別與換行

標籤：添加   標籤   bsp   內容   不能   nbsp   element   lin   style   

 今天寫代碼，用到createTextNode，發現好像功能和innerHTML是一樣的，於是查閱了網上的資料了。

一、createTextNode 例如:

var element = document.createElement("div");element.className = "message";var textNode = document.createTextNode("<Strong>Hello</Strong>");element.appendChild(textNode);document.body.appendChild(element);

 

二、innerHTML 例子:結果: <Strong>Hello</Strong>

<div > <h2 id="h2"></h2></div>document.getElementById("h2").innerHTML = "<strong>hello</strong>";結果: Hello 識別成加粗的黑體

 

三、換行

var t = document.createTextNode("hello w\norld");var t = document.createElement("p");t.innerHTML="HELLO W<br/>orld";

 

四、區別

innerHTML和createTextNode都可以把一段內容添加到一個節點中，區別是如果這段內容中有html標籤（如例子中的<strong></strong>）時表現就不同了，在createTextNode中會當作文本處理，不會被瀏覽器解析，但用innerHTML就會被當作HTML代碼處理（如你的例子中Hello會被加粗顯示）。
總的來說，如果你確定要插入的內容中沒有html標籤，可以用innerHTML，這樣更簡潔，但如果不能確定（比如要插入使用者輸入的內容）建議用createTextNode的方式。

createTextNode和innerHTML區別與換行