본문 바로가기
코딩/자바스크립트 인강

Select 2 : 자바스크립트로 html 생성하는 법

by rosemarie 2023. 3. 9.
반응형

저번시간에 짠 코드는 확장성이 부족합니다.

셔츠사이즈를 95, 100 이라고 하드코딩해놓고 보여주기만 하기 때문입니다.

실제 쇼핑몰이라면 셔츠 사이즈가 매일매일 바뀔 것인데 

이럴 경우 서버에서 보낸 데이터 갯수에 맞게 <option> 태그를 생성해줘야 좋을듯요 

그래서 html을 생성하는 법을 알아봅시다. 

 

html 생성하는 법 1

 

<div> 안에 <p> 태그를 생성하려면 

 

<div id="test">
  
</div>

<script>
  var a = document.createElement('p');
  a.innerHTML = '안녕';
  document.querySelector('#test').appendChild(a);
</script>

 

이러면 생성됩니다. 개발자도구 까보면 div 안에 p태그가 생성되어 있습니다. 

- document.createElement() 쓰면 html 자료를 하나 생성해줍니다.

- 그걸 맘대로 조작한 다음 appendChild() 써서 아무데나 넣으면 html이 생성됩니다.

 

 

 

 

 

 

html 생성하는 법 2

 

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>

이래도 생성됩니다.

 

- 문자자료로 html을 만든 다음 

- insertAdjacentHTML() 안에 넣으면 됩니다.

- 'beforeend' 이건 안쪽 맨 밑에 추가하라는 뜻입니다. 싫으면 맘대로 변경가능 

 

1번 방법은 코드가 너무 길고 복잡하기 때문에 특별한 이유 없으면 2번 방법을 씁니다. 

실은 1번이 더 빠르게 동작하는데 0.0000x초 차이임 

 

 

 

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  $('#test').append(a);
</script>

이래도 됩니다. 

append는 안쪽 맨 밑에 추가하라는 뜻입니다. 

 

 

 

Q. 저는 안쪽에 추가하는게 아니라 아예 바꾸고 싶은데요

A. div찾아서 innerHTML = '<p></p>' 쓰셈

jQuery에선 .html() 입니다. 

 

 

 

 

 

 

바지옵션 누르면 다른 사이즈가 나와야하는데

 

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
      <option>바지</option>
    </select>
    <select class="form-select mt-2 form-hide">
      <option>95</option>
      <option>100</option>
    </select>
</form>

첫 <select> 에 바지옵션을 추가해봅시다.

이거 누르면 28과 30 사이즈가 담긴 <select>가 떠야합니다.

코드 어떻게 짜야하죠?

 

 

 

당연히 html을 미리 만들어놨다가 보여줘도 되는데

실제 쇼핑몰의 경우 그렇게 만들어놓을 순 없습니다.

바지 사이즈가 매일 달라지면 어떻게 합니까 매일 아침 html 수정할 것임?

실제 서비스는 매번 서버에서 데이터를 받아와서 "데이터 갯수만큼 <option> 생성해주세요~" 라고 코드를 짜놓습니다.

그래서 우리도 이를 대비하기 위해 html을 미리 만들어놓지말고 자바스크립트로 html을 생성해봅시다. 

 

 

 

<script>
  $('.form-select').eq(0).on('input', function(){

    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      $('.form-select').eq(1).removeClass('form-hide');
    }
    else if (value == '바지'){
      $('.form-select').eq(1).removeClass('form-hide');
      $('.form-select').eq(1).html('');
      var 템플릿 = `<option>28</option><option>30</option>`;
      $('.form-select').eq(1).append(템플릿)
    }

  });
</script>

그래서 유저가 바지를 선택하면

1. 일단 둘 째 <select> 보여주셈 

2. 둘 째 <select> 안에 비워주셈

3. html 만들어서 둘 째 <select> 안에 append 해주셈 

이라고 코드를 짰더니 진짜로 그렇게 해줍니다.

아니면 더 간단하게 할 수도 있을듯요 

 

 

 

 

(응용)

- 바지 눌렀다가 다시 셔츠 누르면 뭔가 이상해지는 문제도 해결해보면 어떨까요.

셔츠눌렀을 때 둘 째 <select> 안에 있는 html도 조정해줘야겠군요.