주로 개발을 크롬에서 하다보니 IE에서 발생하는 문제는 배포 후에 발견하는 경우가 많다.

이 경우도 크롬에서는 정상동작을 해서 몰랐던 부분인데, 다음 번에 동일한 문제가 발생하더라도 근본적인 원인을 모르면 또 헤맬 것 같아서 정리한다.

### php; html-script: true;

<ul id="sampleList">

<li class="template">

<textarea id="description" placeholder="설명을 입력하세요."></textarea>

<li>

</ul>

위와 같이 template 엘리먼트를 이용하여 <ul> 에 추가될 <li> 를 생성한다고 가정하면, 크롬에서는 위의 태그가 화면에 렌더링 되는 순간 위와 동일하게 엘리먼트가 구성되지만 IE에서는 아래와 같이 변환이 된다.

<ul id="sampleList">
	<li class="template">
		<textarea id="description" placeholder="설명을 입력하세요.">설명을 입력하세요.</textarea>
	<li>
</ul>

placeholder 에 있는 값이 textarea 의 값으로 설정되어 버린다.

### js

var $sampleList = $('#sampleList');

var $templateLi = $sampleList.find('li.template');

var _templateLiHtml = $templateLi.clone().removeClass('template')[0].outerHTML;

// _templateHtml 을 이용하여 추가할 html 태그를 생성

var _newHtml = _templateHtml;

$sampleList.append(_newHtml);

위와 같은 자바스크립트가 실행되면 크롬에서는 value 가 빈 textarea 가 복제가 되지만 IE에서는 value 값이 설정된 textarea 가 복제가 된다. 따라서 복제 후에 다음과 같은 작업을 추가적으로 해주어야 한다.

### js; highlight: [3];

var $sampleList = $('#sampleList');

var $templateLi = $sampleList.find('li.template');

$templateLi.find('textarea[placeholder]').val(''); // textarea 값을 초기화

var _templateLiHtml = $templateLi.clone().removeClass('template')[0].outerHTML;

// _templateHtml 을 이용하여 추가할 html 태그를 생성

var _newHtml = _templateHtml;

$sampleList.append(_newHtml);