[JavaScript] 바닐라 자바스크립트로 외부 HTML 로딩하여 Ajax 처럼 화면 렌더링

바닐라 자바스크립트로 웹사이트를 만들고 있는데, 외부 HTML 파일을 가져와 화면에 렌더링 하고자 하였다. 이때 Ajax처럼 기존에 렌더링 된 화면은 그대로 두고 원하는 부분만 새로 렌더링 하고 싶었다. 결과적으로 적용한 코드는 다음과 같다.

// ID에 렌더링
function openContent(htmlFileName) {
    const h = `<div data-include-path="${htmlFileName}.html"></div>`
    document.querySelector("#showContents").innerHTML = h;
    loadHtml(); // 외부 HTML 파일 로딩 호출
}

// 외부 HTML파일 로딩 함수
function loadHtml() {
    window.addEventListener('click', function() {
        var allElements = document.getElementsByTagName('*');
        Array.prototype.forEach.call(allElements, function(el) {
            var includePath = el.dataset.includePath;
            if (includePath) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        el.outerHTML = this.responseText;
                    }
                };
                xhttp.open('GET', includePath, true);
                xhttp.send();
            }
        });
    });
}

 

<!-- HTML파일 표시 영역 -->
<div id="showContents"></div>

 

만약 a태그로 함수를 호출한다면 아래 코드를 참고하면 된다.

<a href="javascript:void(0);" onclick="호출함수(); return false;">void(0)방식</a>
<a href="#" onclick="호출함수(); return false;">#방식</a>

 

참고 : https://thingsthis.tistory.com/130

A 태그(Ahchor) 에서의 href, onclick 사용