[JS] - innerHTML 사용법

졸업작품 제작을 하다가 자바스크립트로 html을 다루는 방법을 까먹어서 다시 찾아봤다. 사실 기본적인 원리는 알고 있지만 내가 하려는 것은 API로 가져온 데이터들을 추출해서 원하는 데이터를 가공해 각각의 요소들을 상황에 맞게 넣고 싶었다.  

설명이 잘 안되서 예시를 들어보자면 

만약 어떤 버튼을 누르면  div 태그 하나만 추가하는 것이 아닌 여러줄의 뭉텅이 태그를 만들고 싶었다. 

 var div = document.createElement("div");
 var txt = document.createTextNode(`음식점${i}은 ${result[i].place_name} 입니다.`);
 div.appendChild(txt);
 quickfilter.append(div);

이전까지는 이런 방식으로 해서 태그 하나를 만들때마다 이러한 과정을 반복해서 만들고 있었다. 

하지만 검색을 통해 찾던중 더 좋은 방법이 있어서 기록하고 싶어서 블로그를 열었다.

let tempList ="";
    for(let i=0;i<result.length;i++){       // 가게 정보를 배열의 길이만큼 출력
        tempList +=                         // 변수에 html정보를 저장
        `
        <div class="store${i} base">
            <div class="storeName">
            <p>${result[i].place_name}</p>
            <div class="distance">${result[i].distance}M</div>
            </div>
            <p class="phone">${result[i].phone}</p>
            <p class="address">${result[i].road_address_name}</p>
            <a href=${result[i].place_url} class="placeURL">${result[i].place_url}</a>
        </div>`;
        store.innerHTML = tempList;         // 저장된 변수를 innerHTML로 HTML에 추가
    }

이렇게 '(backtick)' 기호를 쓰고 변수에 담아준 후 HTML에서 미리 만들어준  클래스 태그에 넣어주면 된다. 그 후 CSS도 같이 상황에 따라 변경 해줬다. 이 방법을 찾기위해 오늘 도서관에서 2시간이나 태웠다..

아까 미리 HTML에 태그를 만들어 줘야 했는데 이 과정이 꼭 필요하다. 그래야 내가 원하는 자리에 innerHtml을 통해 넣을 수 있기 때문이다. 

가게 정보

이러면 내가 원하는 데이터를 원하는 위치에 넣을 수 있게 된다. 아직 완성은 아니지만 나중에 이과정이 생각나지 않을까봐 적어 본다. ㅎㅎ