DOMParser注入DOM但注入後不應用css樣式表？

我有一個小測試用例了在：DOMParser注入DOM但注入後不應用css樣式表？

的代碼歸結爲以下（給定的一個節點ID爲「目標」）：

var string = '<div class="makeitpink">this should be pink, but is not</div>'; 
var parser = new DOMParser(); 
var domNode = parser.parseFromString(string,"text/xml"); 
document.getElementById("target").appendChild(domNode.firstChild);

如果運行測試用例，然後通過firebug/chrome web檢查器檢查目標節點，並選擇jsfiddle的iframe body標籤內的任何節點，並執行「編輯爲HTML」，隨機添加一個字符串作爲字符串[不是屬性到domnode，清除]和「保存」，風格被應用。但在此之前。說我很困惑是輕描淡寫。

任何人都可以請澄清這裏發生了什麼嗎？謝謝。

來源

2013-03-06 DLeonardi

有點晚，但原因是您已經使用text/xml選項解析了這些選項，這意味着結果是XML節點，它們沒有應用CSS。當你右鍵單擊並進行「編輯爲HTML」時，瀏覽器將它們重新解釋爲HTML，並且元素中的更改將導致重新繪製，重新應用CSS。

我一直在使用我的相對劈十歲上下的解析，但肯定工作創建一個臨時的元素和操作innerHTML屬性，使瀏覽器做，而不是解析的方法：

var temp = document.createElement("div") 
//assuming you have some HTML partial called 'fragment' 
temp.innerHTML = fragment 
return temp.firstChild

你」已經注意到你的jsfiddle。基本上，當您使用text/xml選項時，它歸結爲的輸出爲XMLDocument的實例。

來源

2013-07-09 05:58:11 kieran

您可以將MIME類型更改爲text/html並執行以下操作：

var parser = new DOMParser() 
var doc = parser.parseFromString(markup, 'text/html') 
return doc.body.firstChild

我沒有每一個瀏覽器上測試，但它適用於Chrome和Firefox。我認爲沒有任何理由在其他地方無效。

來源

2017-04-18 09:11:39 ngryman

DOMParser注入DOM但注入後不應用css樣式表？

回答

相關問題