innerHTML 에 태그값을 넣을때 주의하세요. innerHTML 은 웹브라우저가 XML DOM 구조로 이해를 합니다.

아래 코드가 웹브라우저를 통해 보여질때,
'체크' 라는 단어가  빨간색으로 보이면서 클릭을 했을때,
"보이시나요..?" 라는 문구가 나왔으면 좋겠죠..?
그런데, 실은 그렇게 나오지 않지요.

보이는지 알려 주세요.<br> <div id="IDs" style="color:red; background:#EEEEEE"></div><br> 글쎄 잘 보이는지요..?<br> <script> <!-- var o = document.getElementById('IDs'); o.innerHTML = '<a href=javascript:alert("보이시나요..?")>'; o.innerHTML += '체크'; o.innerHTML += '</a>'; //--> </script>

화면에서야 아래와 같이 잘 표시됩니다. 그러나, 빨간색 '체크' 문자를 클릭해도 이렇다 할 반응이 없지요.

그런데, innerHTML 에 넣기 전에 미리 문자열을 만들면 생각했던 대로 제대로 돌아갑니다.

보이는지 알려 주세요.<br> <div id="IDs" style="color:red; background:#EEEEEE"></div><br> 글쎄 잘 보이는지요..?<br> <script> <!-- var o = document.getElementById('IDs'); var s = '<a href=javascript:alert("보이시나요..?")>'; s += '체크'; s += '</a>'; o.innerHTML = s; //--> </script>

아래 그림을 보면 알겠지만, div 태그에 style 옵션으로 글자색을 적색으로 만들었는데,
a 태그의 기본 스타일이 반영된 것을 알 수 있습니다. (참고로, 아래 이미지는 한번 클릭했을 때이고, 이전에는 파란색이었음)

자, 그러면.. 왜 그랬을까요..? 답은 간단합니다.
웹브라우저가 innerHTML 을 XML DOM 구조로 보기 때문에,
맨처음 a 태그가 innerHTML 로 들어갈때 닫히는 태그가 자동으로 삽입되는 것이죠.
그런데, innerHTML 에 넣기 전에 미리 문자열을 만들면 생각했던 대로 제대로 돌아갑니다.

아래와 같이 alert 로 일일이 찍어보세요.

보이는지 알려 주세요.<br> <div id="IDs" style="color:red; background:#EEEEEE"></div><br> 글쎄 잘 보이는지요..?<br> <script> <!-- var o = document.getElementById('IDs'); alert('1.'+o.innerHTML+'.'); o.innerHTML = '<a href=javascript:alert("보이시나요..?")>'; alert('2.'+o.innerHTML+'.'); o.innerHTML += '체크'; alert('3.'+o.innerHTML+'.'); o.innerHTML += '</a>'; alert('4.'+o.innerHTML+'.'); //--> </script>

자, 위와 같이 코딩하고 웹브라우저로 확인해 볼까요..?
이것이 첫번째 alert 입니다. 처음에 div 태그에 innerHTML 이 없기 때문에 공백으로 나오지요.

다음은 두번째 alert 입니다.
코딩할때는 소문자였던 a 태그명이 대문자로 바뀌고, 기술하지도 았았던 "</A>" 가 붙었습니다.

다음은 세번째 alert 입니다. "코딩했던 "체크" 가 "</A>" 뒤에 입력되었습니다.

다음은 네번째 alert 입니다. 코딩했던 "</a>" 가 대문자 "</A>" 로 나왔습니다.
이것도 바뀐 것을 알 수 있습니다.

결론을 말하면, innerHTML 이 LValue 가 아니라 RValue 로 사용될 때는 XML DOM 구조를 잊지 말라는 것이지요.
태그가 들어갔다면 고민을 해야 한다는 겁니다.
아예 DHTML 에서 DOM 구조에 사용하는 함수를 이용하면 더 훌륭하겠지만,
그렇게 할 필요가 없는 간단한 구조라면..
스트링으로 먼저 작업하고 최종적으로 LValue 로 innerHTML 을 사용하라는 것이지요.

간혹, innerHTML 에 태그가 들어가는 경우 웹브라우저에 따라 다른 결과가 나오기도 하는데..
이러한 XML DOM 구조가 맞았는지.. 실수가 없었는지 확인할 필요가 있습니다.
이를테면, Ajax 를 이용하여 미리 HTML 구조로 만든 웹문서를 innerHTML 에 넣을때..
Ajax 로 가져오는 내용은 서버에서 사용자의 PC 로 문자열 형태로 들어오지만,
웹브라우저의 종류나 버전에 따라 innerHTML 에 넣을때 XML DOM 구조로 해석을 합니다.
물론, 표준사양 대로 만들었다면 다름이 없겠지만, 간혹 이유를 알 수 없는 사소한 실수로 나비효과가 나온다면..
Ajax 로 가져오는 URL 을 별도로 실행(웹브라우저에서 URL 요청 Request)해서 XML DOM 구조가 깨지는지 확인해 보세요.