Javascript/jQuery 'includes 사용', 'ul의 li요소 추가 및 제거'

html 코드

<input type="text" id="input-q2">
<button type="button" onclick="q2()">클릭</button>

js코드. indexOf를 사용해봄.

function q2() {
    let value = $('#input-q2').val();

    if (value == '') {
        alert('이메일을 입력하세요.');
    } else if (value.indexOf('@') == -1) {
        alert('@을 입력하세요.');
    }

    let array = value.split('@');
    let result = array[1].split('.');
    alert(result[0]);
}

 

다음은 includes를 사용함

function q2() {
    const q2Value = $('#input-q2').val();
    if(q2Value == ''){
        alert('입력하세요')
    }else if(!q2Value.includes('@')) {
        alert(('@를 입력하세요'))
    }else{
        alert(q2Value.split('@')[1].split('.')[0]);
    }
}

 

 

html코드

<input type="text" id="input-q3" placeholder="여기에 이름을 입력">
<button type="button" onclick="q3()">이름 붙이기</button>
<button type="button" onclick="q3_remove()">다 지우기</button>
<br>
<ul id="names-q3">
    <li>세종대왕</li>
    <li>홍길동</li>
</ul>

일단 생각나는대로 js코드 작성해봄

function q3(){
    let name_list = document.getElementById('names-q3');
    const li = document.createElement('li');
    let value = $('#third_input').val();
    li.append(value);
    name_list.append(li);
}

function q3_remove(){
    const nameList = document.getElementById('name__list');
    const liList = nameList.getElementsByTagName('li');
    while (liList.length>0){
        liList[0].remove();
    }
    //한개씩 지우고싶을 떄
    // if(liList.length > 0){
    //     liList[0].remove();
    // }
}

다음은 좀 더 정돈된 코드

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

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