오늘은 항해 99 숙제에서 사용한 JQuery를 js로 변환해보겠습니다.

변환 이유

요즘 JQuery를 사용이 줄고있는 추세 라고 들었고 실제로 스택 오버플로우 설문에 따르면 21년에 React가 확 증가한 것을 알 수 있다.https://insights.stackoverflow.com/survey/2020#technology-web-frameworks-all-respondents2 (20년 설문)

https://insights.stackoverflow.com/survey/2021#most-popular-technologies-webframe (21년 설문)

변환시작

ID를 통해 요소의 값 가져오기
$('#ID').val() -> document.getElementById('ID').value

ID를 통해 리스트의 자식 요소 지우기
$('#부모리스트ID').val() -> document.getElementById('부모리스트ID').innerHTML = ''

ID를 통해 리스트 자식 추가하기

let htmlCode = `<div>
			${name} 	
                  	<div> ${age}</div>
                </div>`

function appendHtml(el, str) {
            var div = document.createElement('div');
            div.innerHTML = str;
            while (div.children.length > 0) {
                el.appendChild(div.children[0]);
            }
        }

$('#부모리스트ID').append(htmlCode) ->
let 부모리스트ID = document.getElementById('부모리스트ID')
appendHtml(부모리스트ID,htmlCode)

ID를 통해 요소 보이기, 안보이기
$('#부모ID').show() ->
document.getElementById('부모ID').style.display = 'block';

$('#부모ID').hide() ->
document.getElementById('부모ID').style.display = 'none';