JavaScript에 HTML 포함

Hypertext Markup Language는 인터넷에 표시되는 모든 웹 페이지의 루트에 있습니다. HTML DOM은 DOM의 노드를 변경하여 자동으로 업데이트됩니다.

이는 기존 DOM 구조를 업데이트하거나 새 노드를 추가하여 수행할 수 있습니다. 오늘 포스팅에서는 JavaScript에 HTML을 내장하는 방법에 대해 알아보겠습니다.

JavaScript에 HTML 포함

요소의 innerHTML 속성은 요소에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다.

HTML을 문서에 삽입하려면 요소의 내용을 바꾸는 대신 insertAdjacentHTML() 메서드를 사용하십시오.

innerHTML이 설정되면 요소의 모든 자손이 제거됩니다. innerHTML은 제공된 HTML을 htmlString 문자열로 구문 분석하여 생성된 노드로 대체합니다.

요소 자손의 HTML 직렬화를 문자열로 반환합니다.

백그라운드에서 innerHTML을 설정한 후 다음 단계가 실행됩니다.

1. 주어진 값은 문서 유형에 따라 HTML 또는 XML로 구문 분석되어 새 요소에 대한 새 DOM 노드 집합을 나타내는 DocumentFragment 객체가 됩니다.
2. 내용이 대체되는 요소가 템플릿 요소인 경우 템플릿 요소의 내용 속성은 1단계에서 생성된 새 DocumentFragment로 대체됩니다.
3. 다른 모든 요소의 경우 요소의 내용이 새 DocumentFragment의 노드로 대체됩니다.

올바르지 않은 형식의 HTML 문자열을 사용하여 innerHTML 값을 설정하려고 하면 SyntaxError가 발생합니다. innerHTML에 대한 innerHTML 문서에 대한 자세한 정보를 찾을 수 있습니다.

예를 들어 이해해 봅시다.

<div id="list-id"></div>

document.getElementById('list-id').innerHTML =
    '<ol><li>html data</li><li>JS data</li></ol>';

위의 코드에서 하나의 div 태그를 정의했습니다. getElementById를 사용하여 div 태그에 액세스하고 div 태그의 innerHTML 속성에 액세스하여 정렬된 목록을 추가할 수 있습니다.

출력:

1. html data
2. JS data

데모