的innerHTML似乎是這個

只有很好的解決方案我有一個函數創建一個HTML/CSS的MessageBox，我想顯示一個變量（已經逃脫了與PHP json_encode（），無XSS注入可能）。我想在硬編碼的消息中顯示這個變量，它始終是相同的消息。消息顯示<b></b> HTML粗體標記之間這個變量：的innerHTML似乎是這個

Message("Do you really want to delete <b>" + reference + "</b> ?");

傳遞給消息（）函數的字符串將在div標籤被添加和我的唯一的解決方案是使用innerHTML如果我想可變引用以粗體顯示。

很多人說：「不要使用innerHTML它不歸」，「這是一個微軟專有的功能，它不是W3C，將可能不再支持」。

我一直使用DOM方法，但在我的情況下，DOM1 myDiv.firstChild.nodeValue屬性或甚至DOM3 myDiv.textContent方法將無法工作，因爲該字符串僅顯示爲文本。

的innerHTML方法具有優勢，無法逃脫<>字符的HTML實體，不幸的是我認爲這是不可能得到與DOM方法相同的結果。

我不能使用使用document.createElement（「B」）方法，它會因爲希望我的留言（）函數來獲得完整的風格的字符串作爲一個參數，一切變得複雜。

所以我的想法是，innerHTML的需要在某些情況下，而不是複雜的東西去使用，它取決於你如何使用它是不是一個不好的做法。

評論贊賞。

來源

2012-06-29 baptx

元素節點（藥粥，它是有道理的）的'.innerHTML'屬性是一個記錄HTML5功能。 – Pointy

@Pointy謝謝，這是否意味着它將成爲DOM的一部分，就像微軟的XMLHttpRequest被接受了一樣？ http://www.w3.org/TR/html5/embedded-content-0.html#dom-innerhtml – baptx

重要的一點是，它在當今每個重要的現代瀏覽器中都受到支持，包括所有IE版本，移動瀏覽器等。 – Pointy

大多數針對innerHTML的討論都已經過時了。 innerHTML幾乎得到普遍支持（在IE中有一些窄的兼容性問題），現在是HTML5 draft的一部分，是much faster比DOM方法（編輯：或不是，請參閱註釋），並且結果更清晰的代碼。

你想要做什麼是可能的無innerHTML，但它不漂亮：

var div = document.createElement("div"); 
var b = document.createElement("b"); 
b.appendChild(document.createTextNode(reference)); 
div.appendChild(document.createTextNode("Do you really want to delete ")); 
div.appendChild(b); 
div.appendChild(document.createTextNode("?")); 
Message(div);

而且你不得不重構您Message功能採取DOM Node（或Node秒的陣列）而不是文本字符串。所有的一切，我會說這是絕對不值得的 - 除非你的目標IE5

來源

2012-06-29 13:59:29 apsillers

是的，它並不漂亮也很複雜，這意味着每次你想顯示一條消息的時候你都必須創建div節點，這很愚蠢！ div節點是在我的Message（）函數中創建的，這個標籤是MessageBox的一部分，所以在這個函數裏面沒有創建div是無稽之談:) – baptx

順便說一下，我不確定innerHTML比DOM方法更快最近的瀏覽器http://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/3 – baptx

那麼，你可以生成一個子節點數組並使用'Messsage'將它們作爲子節點追加到div，但是，這還不算太好。你的鏈接jsperf測試似乎只使用'innerHTML'作爲getter，而不是setter;我想看看使用它來創建新節點的測試（也許我會創建一個）。 – apsillers

是的。您可以閱讀innerHTML與其他方法的舒緩quirksmode benchmark。

來源

2012-06-29 13:51:18 holygeek

根據此測試，DOM3 textContent> DOM1 nodeValue> DOM0 innerHTML http://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/3 – baptx

Quirksomde基準測試使用Firefox 3和Chrome 5完成，表演似乎已經改變.. – baptx

我相信.innerHTML可以使用。查看這裏的兼容性統計信息：http://www.quirksmode.org/dom/w3c_html.html，他們還突出顯示了使用此方法而不是DOM方法的性能提升。

來源

2012-06-29 13:52:16

謝謝，但你的測試是舊的（Firefox 3和Chrome 5），事情已經改變，DOM方法似乎比innerHTML更好的性能http://jsperf.com/read-innerhtml-vs-innertext -vs-nodevalue-vs-textcontent/3 – baptx

的innerHTML似乎是這個

回答

相關問題