[JavaScript] 문자열을 그대로 html 태그로 DOM에 추가하고 싶을 때

- 사용 기술 -
React(class형) / mobx

- 기능 설명 -

<작성 양식 불러오기> 버튼이 있다.
이 버튼을 누르면 모달이 하나 뜬다.
모달은 왼쪽과 오른쪽으로 나뉘어 있다.
왼쪽은 목록이고 오른쪽은 미리보기다.
왼쪽에는 미리 작성해둔 양식들의 제목이 목록으로 뜬다.
목록에 있는 제목 위에 마우스를 가져다 대면
모달 오른쪽으로 해당 양식의 미리보기가 뜬다.

 

- 문제 -

서버로부터 받아오는 값은 html 문자열이다.
예를 들어 이런 식이다.

const contents = "<span style='font-size: 5pt; color: red; font-weight: bold;'>안녕하세요</span>";

이 내용을 모달 오른쪽으로 출력해야 한다.
그런데 문자열을 그대로 출력하는 게 아니라
html 태그로 생성해서 화면에 띄워야 하는데 그게 안 됐다.

1) textarea

가장 먼저 시도한 방법은 textarea 에다가 value로 넣어버리는 방법이었다.
<Textarea value={contents} />
당연히 잘 작동하지 않았다.
html 태그가 추가되지 않고 문자열이 그대로 출력됐다.

 

2) appendChild

다음 방법은 상위 요소에 접근해서 문자열을 자식 요소로써 추가해봤다.

이 방법 또한 원하는 대로 작동하지 않았다.

document.querySelector('#contentsWrapper').appendChild(contents);

에러가 났는데 에러 메세지는 다음과 같았다.
Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
아마도 자료형이 문제인 듯했다.
appendChild() 함수는 파라미터로 Node 를 넣어주어야 한다.
그런데 우리가 넣어주는 값은 문자열이므로 에러가 났다.

 

3) append 

다음으로 시도한 방법은 append() 함수다.
appendChild() 함수는 파라미터로 Node 를 넣어주어야 하지만
append() 함수는 파라미터로 문자열을 넣어준다.

상위 요소에 접근해서 append() 함수로 html 문자열을 넣어봤다.
이 방법도 원하는 대로 작동하지 않았다.
Textarea 에 value 로 넣은 것과 마찬가지로 내용이 html 으로 출력되지 않고  문자열로 그대로 출력되었다.

- 해결 -

구글링해본 끝에 방법을 찾았다.
바로 innerHTML 이다.

document.querySelector('#contentsWrapper').innerHTML = contents;

상위 요소에 접근해서 innerHTML 속성에 문자열 값을 넣어준다.
이 문자열 값은 html 태그가 그대로 들어가 있어야 한다.

이렇게 innerHTML 로 직접 꽂아주면
별도 처리를 하지 않아도 문자열을 자동으로 HTML 요소로 해석하여 DOM에 추가된다.

 

-221222