innerHTML에 HTML 태그가 아닌 텍스트만 추가될 때 해결 방법

문제의 원인

아마도 innerHTML 속성에 += 연산자를 사용해 문자열을 누적하고 계신 것 같습니다. 이렇게 작성하면 HTML 태그가 태그로 해석되지 않고 화면에 텍스트 그대로 노출되는 문제가 발생할 수 있습니다.

또한 innerHTML에 값을 추가할 때마다 브라우저는 기존 내용을 전부 다시 파싱하고 재구성하기 때문에 성능 면에서도 비효율적입니다.

해결 방법

HTML 문자열을 별도의 변수에 먼저 완성한 후, 마지막에 한 번만 innerHTML에 할당하는 것이 좋습니다. 아래 예제를 참고해 보세요.

var myNum = [1, 2, 3];
var myStr;

myStr = "<ul>";

for (var a in myNum) {
  myStr += "<li>" + a + "</li>";
}

myStr += "</ul>";

id("numberList").innerHTML = myStr;

코드 설명

• myNum 배열의 요소를 순회하면서 각 항목을 <li> 태그로 감싼 문자열을 만듭니다.
• 완성된 목록 문자열을 myStr 변수에 누적합니다.
• 모든 문자열 조합이 끝난 후, 최종 결과를 한 번에 innerHTML에 대입합니다.

이렇게 하면 브라우저가 문자열을 올바른 HTML 구조로 해석하여 목록이 정상적으로 렌더링됩니다.

추가 팁: 더 깔끔하게 작성하기

배열의 map()과 join() 메서드를 활용하면 반복문 없이도 동일한 결과를 더 간결하게 얻을 수 있습니다.

var myNum = [1, 2, 3];
var items = myNum.map(function(n) {
  return "<li>" + n + "</li>";
}).join("");

document.getElementById("numberList").innerHTML = "<ul>" + items + "</ul>";

핵심은 DOM 조작(innerHTML 할당)을 최소한으로 줄이고, 문자열 조립을 먼저 마친 뒤 한 번에 적용하는 것입니다. 이 방식은 태그가 텍스트로 출력되는 문제를 막을 뿐 아니라 페이지 성능 개선에도 도움이 됩니다.