🔹 jQuery - manipulation [inside]

🔅 manipulation란?

선택된 요소 안쪽에 요소 만들기로
선택된 문서객체 자식으로 문서객체를 만들거나 이동시킵니다.

요소.html('tag'); 요소에게 tag를 자식으로 대입

요소.append('tag'); 요소에게 마지막 자식으로 tag추가

요소.prepend('tag'); 요소에게 첫번째 자식으로 tag추가

요소.empty(); 요소를 비웁니다.

요소.remove(); 요소를 제거합니다.

요소.prependTo(타겟); 요소를 타겟의 첫번째자식으로 추가합니다.

요소.appendTo(타겟); 요소를 타겟의 마지막자식으로 추가합니다.

<script>
$(function(){
    //선택된 문서객체 자식으로 문서객체를 만들거나 이동시킵니다.

    //요소.html('tag'); 요소에게 tag를 자식으로 대입
    $('body').html('<h1></h1>');
    $('h1').text('자식요소로 문서객체 조작하기');
    $('body').html('<h2>자식요소로 문서객체 조작하기</h2>');

    //요소.append('tag');  요소에게 마지막 자식으로 tag추가
    $('body').append('<p>자식요소를 추가합니다.</p>');

    //요소.prepend('tag');  요소에게 첫번째 자식으로 tag추가
    $('body').prepend('<h1>첫번째 자식요소를 추가합니다.</h1>');

    //요소.empty();  요소를 비웁니다.
    $('h1').empty();

    //요소.remove();  요소를 제거합니다.
    $('h2').remove();

    //ul을 마지막 자식으로 추가하고 li
    //$('body').append('<ul><li></li><li></li><li></li></ul>');
    $('body').append('<ul></ul>');
    for(var i = 0; i < 3; i++)$('ul').append('<li></li>');
    $('body').append('<ol></ol>');

    //요소.appendTo(타겟);  요소를 타겟의 마지막자식으로 추가합니다.
    $('ul li').appendTo('ol');

});
</script>