26. select

<select>

---

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

<select> 는 <input> 과 같다.

사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input>.

선택지는 <option>으로 정할수 있다.

<select> 태그도 선택 시,

• input, change 이벤트가 발생한다.
• .value로 사용자가 입력한 값을 가져올 수 있다.

html생성

---

방법1

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

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

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

document.createElement() 는 html 태그를 생성해 준다.

요소.appendChild(val) 는 요소 안에 val 을 추가해 준다.

방법2

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

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

문자 데이터로 html을 만든 다음

insertAdjacentHTML('위치', 추가할데이터) 메서드를 사용하면 된다.

방법1이 더 빠르게 동작하지만 0.0000x 초 차이로 큰 의미가 없으니 기호에 따라 사용하자.

+jQuery

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

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