자바스크립트로 html 다루기

저번 게시물에서 일일이 html 을 수정할 수 없다고 했다.

이번에는 자바스크립트로 html 다루는 방법을 알아보겠다.

 

자스로 html 만드는 방법은 두가지가 있다.

 

1. document.createElement()

<div id = "test">

</div>

<script>
    var a = document.createElement('p');
    a.innerHTML ='안녕'; // p태그 안녕 생성함. 그리고 기존 html 안에 넣어줘야겠져?
    document.querySelector('#test').appendChild(a); //<주의>appendChild(a)의 a를 문자열이 아닌 변수로 써줘야함! 

</script>

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

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

 

 

 

2. 문자자료로 html을 만든 다음,  insertAdjacentHTML() 안에 넣기

이게 좀더 편리함.

<div id = "test">

</div>

<script>
   var a = '<p>안녕</p>';
   document.querySelector('#test').insertAdjacentHTML('beforeend',a);
   //beforeend는 안쪽 맨밑에 추가하라는 뜻
</script>

번외편으로 제이쿼리 버전도 있슴

제이쿼리가 제일 쉬운듯?

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

<script>
  var a = '<p>안녕</p>';
  $('#test').append(a);
  //append() 는 안쪽 맨밑에 추가하라는 뜻
</script>

 

 

 

 

 <style>
      .form-hide{
        display: none;
      }
    </style>
    
    <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>

이건 html이고, 이 위에다가 자바스크립트로 element를 생성, 삭제, 변경 등을 해보겠다.

 

//자바스크립트로 html 을 생성해보자
 //첫 셀렉트의 바지옵션을 누르면, 28과30 사이즈가 담긴 <select>가 떠야함
 var 바지옵션28 = "<option>28</option>";
 var 바지옵션30 = "<option>30</option>";


 document.querySelectorAll('.form-select')[0].addEventListener('input',function(){
  var 유저선택 = document.querySelectorAll('.form-select')[0].value;
  if(유저선택 === '셔츠'){
  // 1번째 <select> 보여주셈
    document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
  }else if(유저선택 === '바지'){
  //먼저,1번째 <select> 안에 비워주셈, 그리고 새로 2번째 <select> 채우고 보여주셈
  document.querySelectorAll('.form-select')[1].innerHTML='';
  $('.form-select').eq(1).append(바지옵션28);
  $('.form-select').eq(1).append(바지옵션30);
  document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
 }
 });

 

 

 

---

사이즈가 데이터로 가져올 정도로 많다면?

array.forEach 를 사용해서 반복문을 간단하게 만들어봄

<script>

// 사이즈가 데이터로 가져올 정도로 많다면?
 var pants =[28,30,32,34];

 document.querySelectorAll('.form-select')[0].addEventListener('input',function(){
  var 유저선택 = document.querySelectorAll('.form-select')[0].value;
  if(유저선택 === '셔츠'){
  // 1번째 <select> 보여주셈
    document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
    
  }else if(유저선택 === '바지'){
  //먼저,1번째 <select> 안에 비워주셈, 그리고 새로 2번째 <select> 채우고 보여주셈
  document.querySelectorAll('.form-select')[1].innerHTML='';
  document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
  
  // 배열 pants 에서 item 을 가져와서 각각 뱉어내도록 만들자
  // array.forEach 안에는 콜백함수를 쓴다
  //function(item,i) 에서 item은 배열의 원소를, i는 몇씩 증가하는지를 가리킨다(반복문 돌 때 마다 0부터 1씩 증가하는 정수)
  pants.forEach(function(item,i){
   //console.log(item);
   $('.form-select').eq(1).append(`<option>${item}</option>`)
  })
}
 });


 </script>