$()로 엘리먼트 생성 시 주의할 점

발생일: 2014.12.05

키워드: jQuery, form, $(‘form’), IE8

문제:
버튼을 클릭하면 <form> 엘리먼트를 생성해 특정 주소로 서브밋하는 코드를 아래처럼 만들었다.
<form> 태그는 숨겨둔 채 전송하려고 `style` 속성도 정의했다.

function onClickButton() {
  $(‘<form style=“display:none;”>’).attr({
    target: ’targetFrame’,
    method: ‘POST’,
    action: ‘/some/path'
  }).submit();
}

문제 없이 잘 동작한다.
어랏. IE8에서는 폼이 전송되지 않는다… 왜일까?


해결책:

`jQuery()` API 문서에 의하면, `jQuery()`의 파라미터로 문자열이 들어왔을 경우에 아래와 같이 동작한다.

- 문자열이 싱글 태그인 경우, `document.createElement()`로 태그를 생성한다.
- 복잡한 태그 형태일 경우, `<div>` 태그를 생성한 후에 `innerHTML`로 할당해 생성한다.
- 태그 형태가 아닐 경우, 셀렉터로 동작한다.

‘복잡한 태그 형태’로 추가할 때엔 설명처럼 `innerHTML`로 할당하기 때문에,
태그의 쌍이 맞지 않거나 불완전한 태그일 경우, 몇몇 브라우저에서 올바르게 동작하지 않을 수 있다.

예를 들어,
- 특정 브라우저에서는 `<html>`, `<head>`, `<title>` 등의 엘리먼트는 생성되지 않는다.
- IE8에서는 태그 쌍이 맞지 않을 경우, 특정 엘리먼트가 생성되지 않는다.

그 외에도,
- IE8에서는 `<a>` 태그의 `href` 속성이 절대 경로로 변경된다.
- IE9에서는 HTML5 엘리먼트는 생성되지 않는다.

위 문제도 태그가 완성되지 않았기 때문에 IE8에서 올바르게 동작하지 않았던 것이었다.
여러 브라우저 호환성을 위해, 태그 생성 시엔 단독으로 사용하거나, 항상 닫는 태그를 써주도록 해야겠다.

$('<form>') // Good
$('<form></form>’) // Good
$(‘<form method=“POST”>’) // Bad, IE8에서 엘리먼트가 생성되지 않는다.
$(‘<form method=“POST”></form>’) // Good
$(‘<div style=“display:none;”>’); // Bad, div 엘리먼트는 모든 브라우저에서 문제 없이 렌더링되지만 좋지 않은 습관이다.
$(‘<input>’) // Good
$(‘<input type=“text”>’) // Good (원래 싱글 엘리먼트인 경우)
$(‘<input … />’) // Good (XHTML 형태도 가능하다)


저작자 표시 비영리 변경 금지
신고

카테고리

분류 전체보기 (682)
About me. (6)
Daylogs (647)
비공개 (0)
영어공부 (0)
My works - 추억 (29)