次のjQueryをVanilla JSで置き換える

質問する

上のコードは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();
    }
    두 코드 다 같은 기능을 하는데 자세한 차이는 모르겠다..