[ JS : createElement ] 만들어야 할 HTML TAG가 100만 개가 있다면?

 

 

백만 개를 만드는데 얼마나 시간이 걸릴지 아무도 모른다. chat gpt한테도 무한반복 시키면 랙걸릴듯

하지만  20분이면 해결할 방법을 찾게 됐다.

createElement를 만나게 된 계기

프로젝트 2를 고양이 사진첩을 만들기로 결정한 후 고양이 사진을 클릭하면 모달창이 뽁! 하고 뜨면서 캐러셀되게끔 만드려고 했다.

하지만 createElement를 잘 모르는 나는 하나하나 modal을 html에 만들어서 img를 부여해 보기로 마음을 먹었다.

 

하지만, html 문서가 지저분해지는 것을 보지 못하고 어떻게 하면 좋은 방법이 없을까 chat gpt에게 물어봤다.

그 순간 createElement라는 강력한 무기를 추천받았고 바로 내 코드에 추가하기로 마음먹었다.

이렇게 하니 백만 개가 생겨도 20분이면 해결할 수 있게 되었다.

아무튼!

예시를 보면서 설명해 보겠다.

예시

<section class="modal hidden">
    <i class="fa-solid fa-chevron-left modal__left"></i>
    <div class="modal__content">
        <i class="fa-solid fa-xmark modal__close"></i>
        <img class="modal__img" src="asset/modal-img/0.jpeg" alt="">
        <img class="modal__img hidden" src="asset/modal-img/1.jpeg" alt="">
        <img class="modal__img hidden" src="asset/modal-img/2.jpeg" alt="">
    </div>
    <i class="fa-solid fa-chevron-right modal__right"></i>
</section>

이 html은 이렇게 귀여운 고양이가 보이는 게 되어있다.

 

 

하지만 저 코드들이 100만 개가 존재한다면 html은 걷잡을 수 없는 상황에 직면하게 된다.

그렇다면 어떻게 하는가?

<section class="modal">
	여기 안에 다 넣을거임
</section>

<script>

const modal = document.querySelector('.modal')

</script>

 

 

순서는 이렇다

1. 우선 넣어둘 modal tag를 만든다.

2. js로 그걸 받아온다.

3. createElement로 tag들을 만든다.

4. 3번 tag들을 넣는 함수를 이용해서 modal tag안에 다가 넣는다

이제 여기에다가 다 넣어버리면 끝!! 

 

이제 큰 그림은 끝나고  알려드림

 

태그를 만들고 싶다면?

createElement!!!

const modalElement = document.createElement('section');

이렇게 만들어주면 된다. 이렇게 3번은 끝!

 

오케이 이제 그러면  4번 하면 되는 거죠? 이제 안에 넣어봅자.

 

 

 

 

태그를 안에 넣고 싶다면?

modal.appendChild(modalElement);

겁나 쉽죠~?

 

참고사항

차례대로 넣어야지 된다~

h1을 먼저 넣고 p태그를 넣듯이 넣어야 한다~

 

 

이렇게 넣게 되면 지금 현재 상황은 이렇다.

<section class="modal">
    <section>
      
    </section>
</section>

이제 여기서 이런 의문이 생긴다. 클래스는 어떻게 넣지?

 

 

 

 

클래스 넣는 방법

const modalElement = document.createElement('section');
modalElement.classList.add('modal__element')

이렇게 넣어줄 수 있다. 그리고 클래스를 여러 값을 주고 싶다면..!

 

 

클래스 여러 개 넣는 방법

const modalElement = document.createElement('section');
modalElement.classList.add('modal__element', 'hey')

 

 

그리고 이걸 반복하면 끝!

 

그래도 조금 헷갈리니 이제는 modalElement안에 넣는 것도 해보자.

 

HTML

<i class="fa-solid fa-xmark modal__close"></i>
<img class="modal__img" src="asset/modal-img/0.jpeg" alt="">

JS

const closeButton = document.createElement('i')
cloaseButton.classList.add('fa-solid', 'fa-xmark', 'modal__close')
const image = document.createElement('img')
imageModal.classList.add('modal__img')

modalElement.appendChild('closeButton')
modalElement.appendChild('image')

이렇게 넣어줄 수 있다.

그런데 img는 속성값이 더 있는데요?라는 의문이 또 생기셨다면 정말 존경

 

이미지 속성값 추가하는 법

image.src = `asset/modal-img/0.jpeg`;
image.alt = '귀여운 고양이';

이제 정말 반복만이 답이다.

 

그리고 추가로 이미지를 3개 넣고 싶다? 이렇게 짜주면 됩니다

const images = [];
  for (let i = 1; i <= 3; i++) {
    const image = document.createElement('img');
    image.classList.add('modal__img');
    image.src = `asset/modal-img/c{i}.jpeg`;
    image.alt = '귀여운 고양이';
    modalContent.appendChild(image);
      images.push(image);
      console.log(image.src)
  }

// 이미지 숨기기/표시 함수
  function showImage(index) {
    images.forEach((image, i) => {
      if (i === index) {
        image.classList.remove('hidden');
      } else {
        image.classList.add('hidden');
      }
    });
  }
showImage(0); // 초기에 첫 번째 이미지 표시

이렇게 확장성 있게 짜게 되면 100만 개 넣을 수 있는 코드 완성~!

약간 설명을 더 해보자면 index 들어온 값이 0이라면 forEach에 들어오는 값의 인덱스가 0이었을 때

hidden classList가 사라지고 아니면 안 사라진다. 이런 코드다.

 

 

 

도움이 되었다면 좋겠다!

 

음 그런데 뭐 말하려고 했는데 까먹음..

 

그럼 20000