이어지는 복습 jQuery를 Vanilla JS로 바꾸기

사전강의 2주차 강의에서 jQuery를 사용하는 퀴즈가 있었는데
이를 바닐라 스크립트를 이용해서 풀어보고자 했다.

문제

위 코드가 jQuery, 아래 박스 안의 코드가 바닐라 스크립트!

        function q1() {
            if($('#input-q1').val() ==''){
            alert('입력하세요!')
        }   else {
                alert($('#input-q1').val());
            }
        }

   function q1() {
        let inputBox = document.getElementById('input-q1').value;
        if (inputBox == '') {
            alert('입력하세요!')
        }
        else {
            alert(inputBox)
        }
    }

---

        function q2() {
            let mail = $('#input-q2').val();
            if(mail.includes('@')){
                alert(mail.split('@')[1].split('.')[0])
            } else {
                alert('이메일이 아닙니다용')
            }
        }

   function q2() {
        let inputBox2 = document.getElementById('input-q2').value;
        if (inputBox2.includes('@')) {
            alert(inputBox2.split('@')[1].split('.')[0])
        }
        else {
            alert('이메일이 아닙니다용')
        }
    }

---

 function q3() {
            let txt = $('#input-q3').val();
            $('#names-q3').append(`<li>${txt}</li>`)
        }

   function q3() {
        let inputBox3 = document.getElementById('input-q3').value;
        let createli = document.createElement('li');
        createli.innerHTML = `${inputBox3}`
        document.getElementById('names-q3').appendChild(createli);
    }

---

        function q3_remove() {
            $('#names-q3').empty();
        }

   function q3_remove() {
        document.getElementById('names-q3').innerHTML = '';
        document.getElementById('names-q3').remove();
    }
    두 코드 다 같은 기능을 하는데 자세한 차이는 모르겠다..