JQuery中html()方法使用不當帶來的陷阱

查看源碼
複製代碼 代碼如下:
return this[0] && this[0].nodeType === 1 ?
this[0].innerHTML.replace(rinlinejQuery, "") :
null;

得知其通過非標準的但所有瀏覽器都支援的innerHTML實現。
有些使用者會用html()方法的傳回值作為代碼分支的條件，比如：
複製代碼 代碼如下:
var str = $('#user').html();
if( str=='jack' ){
...
}else if( str=='tom' ){
...
}else if( str=='lily' ){
...
}

多數情況下這沒什麼問題，但如果id=user的html元素內有空格，則不會得到想要的結果了。比如：
複製代碼 代碼如下:
<div id="user"> jack</div>
<script>
alert(document.getElementById('user').innerHTML.length);
</script>

div[id=user]內文本jack前不小心多了3個空格，這時候在各瀏覽器表現不一樣：
IE6/78中，彈出字串的長度是4，即忽略了空格。
IE9/Firefox/Safari/Chrome/Opera中，彈出則是7，即沒有忽略空格。
這時候拿.html()的傳回值作為代碼分支的條件明顯在非IE瀏覽器中會出錯。
如果非要使用元素的html內容作為判斷條件，解決辦法很簡單
1，寫html時去掉空格
2，調用html()方法後再調用trim，如var str = $('#user').html().trim();

相關：

http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0
僅IE6/7/8中innerHTML傳回值忽略英文空格的問題