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
IE6/7/8에서만 InnerHTML 반환 값 영문 띄어쓰기 무시 문제