jQuery 노드 변경 API

추가 API

$('.target').before('<div>before</div>');
$('.target').after('<div>after</div>');
$('.target').prepend('<div>prepend</div>');
$('.target').append('<div>append</div>');

제거API

		$('#btn1').click(function(){
        $('#target1').remove();
    })
   // remove는 엘리먼트 자체를 삭제
    $('#btn2').click(function(){
        $('#target2').empty();
    })
   // empty는 태그 안에 텍스트를 삭제

교체API

// 둘이 똑같이 기능함
    $('#btn1').click(function(){
        $('<div>replaceAll</div>').replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith('<div>replaceWith</div>');
    })

복사

		// 클론이 복사본 만듬
		$('#btn1').click(function(){
        $('#source').clone().replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith($('#source').clone());

!!!! 문자열로 노드 제어

innerHTML(자신 미포함)

타겟의 자식들의 엘리먼트를 대상으로 함

		function get(){
        var target = document.getElementById('target');
        alert(target.innerHTML);
    }
    function set(){
        var target = document.getElementById('target');
        target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
    }

outerHTML(자신 포함)

타겟을 포함한 엘린머트를 대상으로