[jQuery]요소 추가하기:.appendTo()

 

타겟에 새로운 요소를 추가한다.

$('새로운요소').appendTo('타겟');

---

[html]

    <em>one</em>
    <a>two</a>
    <a>three</a>
    <b>four</b> <!--bold 태그-->
    <a>five</a>
    <em>six</em>

    <div>
        <span class='result'></span>
    </div>

[css]

 .txtStyle{font-size:14px; line-height: 20px; margin: 10px;}

[js]

$(document).ready(function(){
           $('*').addClass('txtStyle');
           $('em+a').css('background-color','yellow').each(function(){
                $(this).appendTo('.result')
           });
        });
        

 

[결과화면]

appenTo()를 적용하지 않았을 때 

appendTo()를 적용했을 때

선택자 em+a 는 첫번째 em태그와 형제인 a태그를 의미한다. 즉 two라는 문자열이 들어있는 태그이고 이 태그를 appenTo()를 사용하여 클래스result로 옮긴 것이므로 자리가 이동되었다.

---