jqにおけるhtml()メソッドの不適切な使用によるトラップ

.htmlメソッドパラメータを渡さないときに要素のhtml内容を取得し、ソースコードを表示する
 

return this[0] && this[0].nodeType === 1 ?
	this[0].innerHTML.replace(rinlinejQuery, "") :
	null;

 
標準ではないがすべてのブラウザでサポートされているinnerHTMLで実現されていることが分かった.注意:html 5はこの属性を受け入れました(http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0).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つのスペースが増えたが、このときブラウザごとに表現が異なる:IEでは、ポップアップ文字列の長さは4であり、スペースは無視されている.Firefox/Safari/Chrome/Operaでは、ポップアップは7です.つまり、スペースは無視されません.今取ります.html()の戻り値がコード分岐の条件として明らかに非IEブラウザでエラーが発生する.要素のhtml内容を判断条件としなければならない場合、解決策は簡単である1、htmlを書くときにスペース2を削除し、html()メソッドを呼び出した後、var str=$('#user')などのtrimを呼び出す.html().trim();