[Javascript] insertAdjacentHTML

 

1. javascript로 element 생성하기

현재 pug를 이용한 프로젝트를 진행 중인데 그러던 중 delete 버튼을 클릭하면 상품이 삭제 안내 메세지 문구가 생성되게 하는 기능을 구현하게 되었다.

 

javascript를 이용해 엘리먼트 요소를 만드는 방법을 크게 두가지로 알고 있었다.

 

1. 정석 중의 하나인 document.createElement를 이용하여 엘리먼트를 생성하고 classList.add를 이용해 class를 붙여주고 appendChild 등을 이용해 원하는 위치에 삽입하는 방식.

2. innerHtml을 이용하여 템플릿 리터럴로 요소를 집어넣는 방식.

 

첫번째는 구조가 복잡하고 class가 많이 붙을수록 코드가 너무 번거로워지고 보기에도 어렵고 효율적이지도 못하다.

 

두번째는 첫번째에 비해 많이 효율적이게 되지만 innerHtml 특성 상 해당 부분의 내부 html 전체를 교체해버리기 때문에 다른 형제 요소가 존재할 경우에는 사용하기 위험하고 세부적으로 원하는 위치에 넣기에도 어려움이 있다.

 

그렇기에 나는 innerHtml과 appendChild를 조합하여 구현하곤 했는데 방법은 아래와 같았다.

        const deleteMsgLi = document.createElement('li');
        deleteMsgLi.classList.add('buy-header-msg__item', 'buy-header-msg__item--success');
        const msg = `<div class="buy-header-msg__container"><i class="buy-header-msg__icon buy-header-msg__icon--success"><span class="sr-only">success</span></i><div class="buy-header-msg__title font-m-normal-12">We've removed the selected item(s) from your basket.</div></div><button class="buy-header-msg__remove" type="button"><span class="sr-only">remove</span></button>`;
        deleteMsgLi.innerHTML = msg;
        headerMsg.appendChild(deleteMsgLi);

1. createElement로 appendChild로 들어갈 엘리먼트의 최상위 부모 요소를 생성해주고

2. class를 부여해준다.

3. 그 후 자식 요소로 들어갈 구조들을 템플릿 리터럴로 msg 변수에 저장 후

4. innerHTML로 자식 요소를 넣어준다.

5. 그 뒤 완성된 구조를 appendChild로 원하는 위치에 자식 요소로 넣어줬다.

 

2. insertAdjacentHTML

첫번째에 비하면 꽤나 간단해졌지만 뭔가 번거롭다는 생각이 들었다.

 

그래서 찾아보던 중 insertAdjacentHTML을 발견했다.

insertAdjacentHTML 메서드는 텍스트를 파싱하고, 특정 위치 DOM tree 안에 원하는 node들을 추가한다.

그렇기 때문에 innerHTML 등의 메서드들보다 삽입하려는 위치를 더 세밀하게 다룰 수 있다.

 

문법은 아래와 같다.

element.insertAdjacentHTML(position, text);
// postion에는 beforebegin, afterbegin, beforeend, afterend만 들어갈 수 있다.
// text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이다.

 

각 position의 위치는 아래와 같다.

<!-- [beforebegin] : element 앞에 --> 
<p>
	<!-- [afterbegin] : element 안에 가장 첫번째 child -->
	foo
	<!-- [beforeend] : element 안에 가장 마지막 child -->
</p>
<!-- [afterend] : element 뒤에 -->

 

주의점은 position과 text 둘 다 string으로 작성되어야 한다는 점이다.

        headerMsg.insertAdjacentHTML(
            'beforeend',
            `<li class="buy-header-msg__item buy-header-msg__item--success"><div class="buy-header-msg__container"><i class="buy-header-msg__icon buy-header-msg__icon--success"><span class="sr-only">success</span></i><div class="buy-header-msg__title font-m-normal-12">We've removed the selected item(s) from your basket.</div></div><button class="buy-header-msg__remove" type="button"><span class="sr-only">remove</span></button></li>`
        );

이렇게 insertAdjacentHTML을 통해 한 줄로 줄어들고 보기에도 편해졌다.

 

이번 경험을 통해 늘 하던 방식이 아닌, 효율적이면서도 현재 상황에 맞는 방법을 더 찾아보고 발전시켜보자는 생각이 들었다.