[JavaScript/jQuery] html 태그 인식 이슈

 안녕하세요 코북입니다. <textarea> 내에 html 태그를 삽입하여 html이 렌더되지 않고 텍스트 그대로 출력되는 이슈가 있었습니다. 

해결 방법

1. <textarea>를 <div>로 변경

<textarea id="co_id"></textarea>

<!-- 변경 -->

<div id="co_id"></div>

 

2-1. jQuery 문법 .val()를 .html()로 변경

2-2. innerHTML로 변경

var cobook = "<p><span>제목 : HTML5 이슈 </span><span>내용 : 무야호</span></p>";

$('#co_id').val(cobook);

// 변경

// jQuery
$('#co_id').html(cobook); 
// JavaScript
document.getElementById('co_id').innerHTML = cobook;

.html()은 선택한 요소 안의 내용을 가져오거나, 이전 내용을 새로운 내용으로 변경해줍니다. 위 코드처럼 사용하면 div 요소의 내용을 <p><span>제목 : HTML5 이슈 </span><span>내용 : 무야호</span></p> 로 바꿔줍니다. 삽입하는 내용에 있는 HTML 태그를 텍스트가 아니라 태그로 인식합니다.

 

JavaScript의 경우 innerHTML을 사용하면 태그를 인식합니다.

 

결과