[Javascript] 문자열을 html 변환하기

자바스크립트에서 문자열을 html로 변환하여 DOM에 삽입하는 방법은 두 가지가 있다.

 

 

1. innerHTML

첫 번째는 innerHTML이다.

innerHTML에 html 형식의 내용이 담긴 문자열을 대입하면

html 태그가 파싱되어 페이지에 삽입된다.

 

element.innerHTML = '삽입 문자열';

 

 

2. insertAdjacentHTML()

 

두 번째는 insertAdjacentHTML 이다.

위의 innerHTML와 같은 역할을 하지만 html이 삽입될 위치를 정할 수 있다는 점이 다르다.

insertAdjacentHTML은 파라미터로 2개의 값을 받는다.

 

element.insertAdjacentHTML("삽입 위치", "삽입 문자열");

 

삽입 위치는 총 4가지 위치가 존재한다.

 

beforebegin : 요소의 이전 형제 노드로 삽입

afterbegin : 요소의 첫 번째 자식 노드로 삽입

beforeend : 요소의 마지막 번째 자식 노드로 삽입

afterend : 요소의 다음 형제 노드로 삽입

 

 

<!-- beforebegin -->
<div class="target">
    <!-- afterbegin -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <!-- beforeend -->
</div>
<!-- afterend -->

 

 

이 둘을 사용하면 편리하게 html 태그를 생성할 수 있지만

html을 문자열로 작성하여 파싱한다는 점에서 XSS 공격에 취약하다는 단점을 가지고 있다.

 

만약 innerHTML이나 insertAdjacentHTML을 사용하게 된다면 <, > 등과 같이 스크립트에 사용되는 문자를 필터링하는 등 취약점에 대비하는 것이 좋다.