📖<부모 자식 관계>
`
append(contents) 일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML코드나 엘리먼트를 덧붙인다.
appendTo(targets) 확장 집합의 모든 엘리먼트를 전달한 대상 엘리먼트 콘텐츠의 끝에 추가한다.
prepend(contents) 일치하는 모든 엘리먼트의 콘텐츠의 앞에 전달된 HTML 코드나 엘리먼트를 덧붙인다.
prependTo(targets) 확장 집합의 모든 엘리먼트를 전달한 대상 엘리먼트 콘텐츠의 앞에
부모.append(자식)
<부모>
<자식>
$(자식).A
.B
.C
.D
.appendTo(부모)
`
📖<형제 관계>
`
before(contents) 전달된 HTML 코드나 엘리먼트를 대상 엘리먼트의 형제 엘리먼트로 대상 엘리먼트의 앞에 추가한다.
insertAfter(targets) 확장 집합의 모든 엘리먼트를 전달한 대상 엘리먼트 앞의 DOM 위치에 추가한다.
after(contents) 전달된 HTML 코드나 엘리먼트를 대상 엘리먼트의 형제 엘리먼트로 대상 엘리먼트의 뒤에 추가한다.
insertBefore(targets) 확장 집합의 모든 엘리먼트를 전달한 대상 엘리먼트 뒤의 DOM 위
`
✍예제1
$(function(){
$('div').append($('b')); //b가 div의 막내자식
//$('요소').append($('새요소')); //새요소가 요소 뒤
$('span').prependTo('b');//span가 b의 맏이자식
$('div').before($('b')); //div 이전에 b 위치
$('b').insertBefore('span'); //span이전에 b위치
$('div').appendTo('b');//div가 b의 막내자식
//$('새요소').append($('요소')); //새요소가 요소 뒤
$('span').prepend($('b'));//b가 span의 맏이자식
$('b').after($('span')); //b 이후에 span위치.
$('b').insertAfter('span'); //span이후에 b위치.
alert($('body').html());
});
</script>
</head>
<body>
<div>jQuery</div>
<span>JavaScript</span>
<b>Java</b>
</body>✍예제2
$(function(){
//1.id=footer 앞에 ol테그를 생성하세요.
$('<ol id ="notes"></ol>').insertBefore("#footer");
//2.span 앞에 [1][2][3]만들기
//3.<span> => ol안에 넣기.
$('span.footnote').each(function(index){
$(this).before('<a id ="context-'+(index+1)+'">['+(index+1)+']</a>')
.appendTo('#notes')
.append('$nbsp;<a href="#context-'+(index+1)+'">context-'+(index+1)+'</a>')
.wrap('<li></li>');
});
});
개발자로 차근차근