jQuery 공작소 : .add()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

add 메서드는 새로운 셀렉터나 요소를 추가합니다.
이게 무슨의미일까요.. 예제를 통해서 살펴봅시다. 쉬운 메서드 입니다.

예제 1
기존 셀렉터에 새로운 셀렉터 추가하기
보기
예제의 기본 셀렉터는 div 만 대상으로 합니다.

jQuery 공작소 (div)
jQuery 공작소 (span)

jQuery 공작소 (p)

소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 10px;
    }
    .css_test div, .css_test p, .css_test span {
        margin : 5px;
        padding : 10px;
        font-weight : bold;
        font-size : 16pt !important;
    }
</style>

예제의 기본 셀렉터는 div 만 대상으로 합니다.<br><br>
<button type="button" onclick="$('.css_test div').css('color', '#0080C0'); j_test()">기본</button>
<button type="button" onclick="$('.css_test div').add('.css_test span').css('color', '#8000FF'); j_test()">기본 + span</button>
<button type="button" onclick="$('.css_test div').add('.css_test span').add('.css_test p').css('color', '#FF0080'); j_test()">기본 + span + p</button>

<div class="css_test mt10">
    <div>jQuery 공작소 (div)</div>
    <span>jQuery 공작소 (span)</span>
    <p>jQuery 공작소 (p)</p>
</div>

<script type="text/javascript">
    function j_test(){
        setTimeout(function(){
            $('.css_test div').add('.css_test span').add('.css_test p').css('color', '')
        }, 500);
    }
</script>
관련 CSS
borderborder-radiusbox-shadowfont-sizefont-weightmarginpadding
jQuery
설명 준비중 ㅠㅠ.. 기존 설명을 날려먹었네요..
예제 2
html 태그를 사용하여 내용 추가하기
보기
jQuery 공작소
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 10px;
    }
    .css_test div {
        margin : 5px;
        padding : 10px;
        font-weight : bold;
        font-size : 16pt !important;
    }
</style>

<button type="button" onclick="j_test()">add 메서드로 이미지 추가하기</button>

<div class="css_test">
    <div>jQuery 공작소</div>
</div>

<script type="text/javascript">
    function j_test(){
        // 보기편하게 여러줄로 코딩
        $('.css_test')
        .add('<img src="https://t1.daumcdn.net/cfile/tistory/261FC83454D7331705" />') // 태그를 추가
        .appendTo( $('.css_test') ) // 추가된 태그를 요소로 만들어서 넣기 (.css_test 에 이미지 추가)
    }
</script>
관련 CSS
borderborder-radiusbox-shadowfont-sizefont-weightmarginpadding
jQuery

$( '.css_test' ).add( '<img src="이미지 주소" />' ).appendTo( $( '.css_test' ) )
- 클래스명이 css_test 인 요소에 이미지 태그를 추가하고 다시 클래스명이 css_test 요소에 추가합니다.
- 이렇게도 사용가능합니다. 하지만 !

$( '.css_test' ).append( '<img src="이미지 주소" />' )  -  위 예제처럼 사용할거면 이렇게 하는게 더 좋겠죠.

참고 메서드 .add()

jQuery 홈페이지 .add() API 문서 : http://api.jquery.com/add/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소