[Javascript] jQuery 'append()'를 순수 자바스크립트로 작성해보자 -jQuery append() in Pure Javascript

 

애플 코딩님의 강의를 듣고 있는데 이 강사님은 jQuery로 작성법을 알려주실 때가 많다. 

순수 Javascript를 알고 싶은 나는 강사님이 jQuery로 작성하시면 강의를 잠시 멈추고 Javascript 작성법으로 최대한 찾아 적어놓는다.

덕분에 강의듣는 시간은 느려지긴 했지만, 이 과정이 꼭 필요하다고 생각했다. 재밌기도 하고..

 

---

이번에는 HTML를 자바스크립트에서 동적으로 생성하는 것을 배웠다. 

만약 아래의 HTML 코드에서 주석 처리된 부분을 순수 자바스크립트를 사용해 추가시키고 싶다면 어떻게 해야 할까?

 

    <form class="container">
        <div class="form-group">

            <p>상품선택</p>
            <select class="form-control" id="option1">
            <option>모자</option>
            <option>셔츠</option>
            </select>

            <div class="size-select">
                    <p> Select the size </p>
                    <select class="form-control" id="option2">
                    <!-- <option>95</option>
                    <option>100</option>
                    <option>105</option> -->
                    </select>
            </div>
        </div>
    </form>

1.  jQuery 작성법

 

강사님이 알려주신 jQuery로 작성하면 간단하다.

template라는 변수를 만들어 넣을 html 코드를 넣고 append() 또는. html()를 이용해

원하는 곳에 코드를 넣을 수 있다. 

 

    <script>
           let template = `
                           <option>95</option>
                           <option>100</option>
                           <option>105</option> 
                          `;
           $('#option2').append(template);
    </script>

 

1.  Javascript 작성법

그렇다면 순수 자바스크립트(javascript)로는 어떻게 할까? 

구글링 안 해보고 해 보고, 찾아보고도 해봤는데 꽤 오래 찾고 시도해봤다. 

 

 

 

 

 

'순수 자바스크립트로는 구현하기 어려운 건가?'라는 생각이 들 때 즈음 순수 자바스크립트 버전을 찾았다. 

필자의 경우 셔츠를 선택했을 때 나타나야 했기 때문에 if 문을 썼지만, 주요 코드만 정리하면 아래와 같다. 

 

    <script>
    	   let element = document.querySelector('#option2');
           let template = `
                          <option>95</option>
                          <option>100</option>
                          <option>105</option> `;
           element.insertAdjacentHTML('beforeend', template);
    </script>

 

처음에는 변수를 document.createElement()로 지정해  appendChild로 요소를 추가해서 했는데 오류가 났다.

찾아보니 이러한 이유가 있었다.

appandChlid라는 Method는

- HTML string은 추가할 수 없다.

- 한 번에 하나의 DOM 요소만 추가할 수 있다.

이 것만 사용해서도 내가 원하는 걸 구현할 수 있지만, 정말 번거로운 과정이 동반된다. 

나처럼 <div> 안에 자식 요소가 있는 경우 모든 요소에 대해 프로세스를 반복해야 한다. 

 

 

하지만,insertAdjacentHTML()를 사용하면 append()만큼이나 쉽게 구현할 수 있다. 

 

element.insertAdjacentHTML("beforeend", "html string")

 

이렇게 ("position", "html string")이라는 두 개의 매개변수가 필요하고 요소에 들어갈 위치로는

네 개의 포지션이 있다. [ beforebegin / afterend / afterbegin / beforeend]

> 포지션에 대한 설명은 하단 레퍼런스 링크 참조

 

일반적인 추가일 경우 beforeend를 쓰면 된다. 

 

필자의 경우 추가할 html string을 template라는 변수로 정의했기에 위처럼 입력이 가능했다. 

 

 

 

Reference : https://usefulangle.com/post/143/pure-javascript-append