JS 상에서 HTML 동적 생성

https://choi95.tistory.com/70

동적 Tabs

JS 상에서 HTML 태그 동적 생성

이전  포스팅에서 Tabs-Content는 HTML 상에서의 정적인 태그가 아닌, 서버로부터 받은 Tab-Data들의 갯수와 내용에 따라 동적으로 생성되어야 한다.

 

이를 위해 다음과 같이 요구되는 태그들을 setAttribute()와 createElement()를  통해 동적으로 생성해 주는 함수를 만들었다. 

function createNavElement(tag, tabNum, tabTitle) {
  if(tag === 'div') {
    for(let i = 0; i < tabNum; i++) {
      let tab = document.createElement('div');
      tab.setAttribute('class', "tab");
      tab.setAttribute('data-index', `${i}`);
      tab.textContent = `${tabTitle[i].title}`;
      divNavElem.push(tab);
    }
  } else {
    glider = document.createElement('span');
    glider.setAttribute('class', 'glider');
  }
}

태그를 만들때 필요한 정보들을 매개 변수로 넘겨 주어 태그 종류에 따라 각기 다른 연산을 하도록 코드를 구성하였는데,

태그를 만들때 마다 함수를 만들어주고 생성하는 것은 다소 비효율적이라는 것을 깨달았다.

이를 대신에 innerHTML를 사용하였다.

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

const nav = tabsData.map(
      ({ title }, i) => `
        ${i === 0 ? "<nav>" : ""}
        <div class="tab" data-index="${i}">${title}</div>
        ${i === tabsData.length - 1 ? '<span class="glider"></span></nav>' : ""}`
    );
    //tabsData는 Tab-Data에 대한 정보를 가지고 있는 배열이다.

다음과 같이 map 메서드를 사용하여 innerHtml에 들어갈 마크업을 리터럴의 표현식 삽입을 통해 동적으로 생성해준 뒤, nav 라는 변수에 새롭게 배열로 할당해 준다.

마찬가지로 다른 태그들 또한 위와 같은 연산을 통해 마크업을 생성해 준다.

$tabs.innerHTML = [...nav, ...contents].join("");

생성한 마크업이 담긴 배열들을 스프레드 연산을 통해 하나의 배열 내에 묶어준 뒤, join 메서드를 통해 문자열로 치환해서 상위 컨테이너인

tabs의 innerHTML에 할당해 주었다.

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

JS에서 생성해야 될 마크업들이 많을 경우에는 다음과 같이 innerHTML을 통해 만드는 것이 중복된 코드를 줄일 수 있다는 것을 깨달았다.