JQuery day5

요소 추가 | 기존 요소 추가

JQuery로 DOM 다루기

이번에는 JQuery로 DOM(문서객체모델)을 다뤄보자.

[요소 추가]

종류	설명
append()	선택한 요소의 하위 요소 마지막에 새로운 요소나 컨텐츠를 추가
appendTo()	append() 메소드와 같지만 소스의 타켓의 위치가 서로 반대
prepend()	선택한 요소의 하위 요소 처음에 새로운 요소나 컨텐츠를 추가
prependTo()	prepend() 메소드와 같지만 소스의 타켓의 위치가 서로 반대

$('선택자').append('요소');
$('요소').appendTo('선택자');
// 요소와 선택자의 위치를 바꿔서 표현도 가능하다.

요소 추가 예제를 확인해보자

<ul id="list">
    <li>안녕하세요</li>
    <li>반갑습니다</li>
    <li>좋은 하루 보내세요</li>
</ul>
<button id="app">(마지막부터)방명록 추가</button>
<button id="pre">(1번부터)방명록 추가</button>

<script>
$(function(){
    $('#app').on('click', function(){
        $('#list').append('<li>오늘 멋진 하루입니다</li>');
    });
    $('#pre').on('click', function(){
    	$('#list').prepend('<li>안녕하세요 반가워요</li>');
    });
});
</script>

이벤트가 작동하지 않았을 때)

1번 이벤트가 작동된 후)

2번 이벤트가 작동된 후)

[기존 요소 추가]

종류	설명
before()	선택한 요소의 바로 앞에 새로운 요소나 컨텐츠를 추가
insertBefore()	before() 메소드와 같지만 소스와 타겟의 위치가 서로 반대
after()	선택한 요소의 바로 뒤에 새로운 요소나 컨텐츠를 추가
insertafter()	after() 메소드와 같지만 소스와 타겟의 위치가 서로 반대

요소 추가 예제를 확인해보자

<table border="1" width="320">
    <colgroup>
        <col width=100>
        <col width=200>
    </colgroup>
    <tr id="firstRow">
        <td>홍길동</td>
        <td>반갑습니다</td>
    </tr>
</table>
<p><button id="btn1">행 위로 인사말 추가</button> <button id="btn2">행 아래로 인사말 추가</button></p>

<script>
    $(function(){
    $('#btn1').on('click',function(){
        $('#firstRow').before('<tr><td>이순신</td><td>초대되어 너무 기쁘네요</td></tr>');
    });
    $('#btn2').on('click',function(){
        $('#firstRow').after('<tr><td>유관순</td><td>오늘도 좋을 하루 보내세요</td></tr>');
    });
});
</script>

이벤트가 작동하지 않았을 때)

1번 이벤트가 작동된 후)

2번 이벤트가 작동된 후)