JS 문자열을 HTML 개체로 변환

📄 JS 문자열을 HTML 개체로 변환

자바스크립트에서 작성한 문자열을 innerHTML 속성을 이용해 HTML로 변환시켜 주는 방법입니다.

const stringToHTML = function (str) {
  const dom = document.createElement("div");
  dom.innerHTML = str;
  return dom;
};
console.log(stringToHTML(`<h1>Hello world!</h1><p>How are you today?</p>`));

결과

<div>
  <h1>Hello world</h1>
  <p>How are you today?</p>
</div>

• domcument에 div 엘리먼트를 추가한다.
• 새로 생성된 div 인스턴스는 dom과 연결된다.
• dom의 경우 innerHTML 속성을 설정해서 HTML 개체로 변환한다.
• return은 strinToHTML 함수에 대한 dom 인스턴스가 된다.

출처

• DelftStack-JavaScript에서 문자열을 HTML로 변환