자바스크립트로 html 생성하는 법 질문있습니다

하기와같이 코딩했는데 바지사이즈가 그대로 95 100으로 나옵니다 ㅠㅠ
어디서 틀렸는지 아무리봐도 안보입니다 ㅠㅠ 살려주세요

추가로 append, appendchild 차이점이 궁금합니다

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

<select id="option-shirt" class="form-select mt-2 hide">
<option>95</option>
<option>100</option>
</select>
</form>

---------------------

$('.form-select').eq(0).on('input', function(){
if(document.getElementsByClassName('form-select mt-2')[0].value == '셔츠'){
document.getElementById('option-shirt').classList.remove('hide')
} else if(
document.getElementsByClassName('form-select mt-2')[0].value =='바지'){
//바지 옵션창 띄워주세요
document.getElementById('option-shirt').classList.remove('hide');
document.getElementById('option-shirt').innerHTML('');
var 템플릿 = `<option>28</option>
<option>30</option>`;
document.getElementById('option-shirt').append(템플릿);
} else {
document.getElementById('option-shirt').classList.add('hide')
}