JQuery_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 要素内にスペースがある場合、期待した結果が得られません。例:

コードをコピー コードは次のとおりです:

jack

<script> <br>alert(document.getElementById('user').innerHTML.length); <br></script>

div[ id=user] が誤ってテキスト ジャックの前に 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
InnerHTML の戻り値は IE6/7/8 のみ英語のスペースを無視する問題