[J-Qurey] 요소 추가 및 삭제(append, remove..)

➕ 요소 추가 (append)

제이쿼리를 사용하면 자바스트립트보다 쉽게 요소를 추가할 수 있다.

$(셀렉터).append( “추가 내용”); : 선택한 요소 내 마지막 요소에 추가
$(셀렉터).prepend(“변경 내용”); : 선택한 요소 내 시작점에 추가
$(셀렉터).after(“변경 내용”); : 자식 요소가 아니라 동일 요소로 들어간다. (뒤에)
$(셀렉터).before(“변경 내용”); : 자식 요소가 아니라 동일 요소로 들어간다. (앞에)

주로 많이 사용하는 함수는 append() 이다.
요소를 추가하는 함수를 사용할 때에는 변수에 추가할 요소를 담아서 사용해주는 것이 좋다!

---

🔽 사용예시

그렇다면 append 를 사용해서 사용자의 입력에 따라 테이블에 행이 추가되는 코드를 작성해보자 (버튼을 누르면 테이블에 행/열 추가)

$('button').on('click', function(){
  $('tbody').append('<tr></tr>')
    .append('<td>'+$('#no').val()+'</td>')
    .append('<td>'+$('#name').val()+'</td>')
    .append('<td>'+$('#sub').val()+'</td>')
    .append('<td>'+$('#score').val()+'</td>')
    .append('<td>'+$('#desc').val()+'</td>');
});

하지만 우리가 무언가를 추가할 때에는 추가할 내용을 변수에 담아서 사용해주는 것이 좋다고 했다.
그렇다면 변수에 변경될 내용을 담는 코드를 작성해보자!

$('button').on('click', function(){
    var no = $('#no').val();
    var name = $('#name').val();
    var sub = $('#sub').val();
    var score = $('#score').val();
    var desc = $('#desc').val();
    var content = '<tr>';
        content += '<td>'+no+'</td>';
        content += '<td>'+name+'</td>';
        content += '<td>'+sub+'</td>';
        content += '<td>'+score+'</td>';
        content += '<td>'+desc+'</td>';
        content += '</tr>';
    $('tbody').append(content); 
});

위 코드는 보기는 좋지만 간결하지 않다는 단점이 있다.
그렇다면 코드를 간결하게 하기 위해 반복되는게 있다면 배열에 담아 for문을 돌릴 수 있다.

$('button').on('click', function(){
    var content = '<tr>';
        for(var i = 0; i<$input.length; i++){ 
            content += '<td>'+$input.eq(i).val()+'</td>'; 
        }
        content += '</tr>';
    $('tbody').append(content);
});

위 코드를 보며 더 간결해지기는 했지만 단점도 있다.
이렇게 배열에 담아오게 되면 만약 요소의 순서가 변경될 경우 데이터가 꼬일 수 있으므로, 변경이 없는 데이터의 경우에만 사용해주는 것이 좋다.

❌ remove() 와 empty()

remove() 와 empty() 를 통해서 지정한 하위 요소를 삭제할 수 있다.

• remove() : 선택한 요소와 하위 요소도 모두 삭제
• empty() : 선택한 요소의 하위 요소만 삭제 (비워낸다)

---