- append(html 문자열) : html문자열 추가 또는 이동
- prepend(html 문자열) : 맨 앞에 html 문자열을 추가 또는 이동
- before(html 문자열) : 바로 앞에 html 문자열 추가 또는 이동
- after(html 문자열) : 형제엘리먼트의 바로 뒤에 html 문자열을 추가 또는 이동
- appendTo(target) : 자식엘리먼트 중 맨 뒤로 이동
- prependTo(target) : 자식엘리먼트 중 맨 앞으로 이동시킵니다.
- insertBefore(targets) : 형제엘리먼트 바로 앞으로 이동시킵니다.
- insertAfter(targets) : 형제엘리먼트 바로 뒤로 이동시킵니다,
① append() 메서드 활용_html문자열 추가 또는 이동
<style>
.newElement { color:red; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li:eq(2) > ul');
el.append('<li class="newElement">3-5</li>'); // 자식 엘리먼트 중 맨 뒤에 추카 또는 이동
});
</script>
[ 변경 전 ]
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul> // $('#wrapper > ul > li:eq(2) > ul');
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4 </li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
[ 변경 후 ]
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4 </li>
<li class="newElement'>3-5 </li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
② prepend 메서드 활용_맨 앞에 html 문자열을 추가 또는 이동
<style>
.newElement { color:red; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li' ).eq(2).find('>ul'); // 3-1의 부모 엘리먼트 ul태그를 선택
el.prepend('<li class="newElement">3-0</li>'); // 맨앞으로 추가
});
</script>
[ 변경 전 ]
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul> // $('#wrapper > ul > li' ).eq(2).find('>ul')
<li>3-1 </li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
[ 변경 후 ]
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li class="newElement' >3-0 </li>
<li>3-1 </li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
③ before 메서드 활용_ 바로 앞에 html 문자열 추가 또는 이동
<style>
.newElement { color:red; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li:eq(2) > ul > li:eq(2)'); // 3-2 엘리먼트 선택
el.before('<li class="newElement">3-3</li>'); //바로 앞에 html 문자열 추가 또는 이동
});
</script>
[ 변경 전 ]
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-4 </li> // $('#wrapper > ul > li:eq(2) > ul > li:eq(2)');
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
[ 변경 후 ]
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3-1</li>
<li>3-2</li>
<li class="newElement'>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
④ after 메서드 활용_형제엘리먼트의 바로 뒤에 html 문자열을 추가 또는 이동
<style>
. newElement { color:red; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li:eq(2) > ul > li:eq(1)');
el.after($('. newElement')); // 형제 엘리먼트 바로 뒤에 추가 또는 옮겨주기
});
</script>
하단에 3-3 엘리먼트를 바로 아래 하단으로 추가하기(옮기기)
[ 변경 전 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3-1</li>
<li>3-2 </li> // $('#wrapper > ul > li:eq(2) > ul > li:eq(1)');
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<li class="newElement">3-3</li>
</body>
[ 변경 후 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3-1</li>
<li>3-2 </li>
<li class="newElement' >3-3 </li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
⑤ appendTo() 메서드 활용_ 자식엘리먼트 중 맨 뒤로 이동
<style>
.newElement { color:red; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li:eq(2) > ul');
$('. newElement').appendTo(el);
</script>
아래에 3-5엘리먼트를 셀렉트해서 3-5자리로 이동해 주세요.
appendTo()메서드를 호출하여 인자값으로 newElement를 선택하여 넘겨줍니다.
[ 변경 전 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul> // $('#wrapper > ul > li:eq(2) > ul');
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4 </li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<li class="newElement">3-5</li>
</body>
[ 변경 후 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul> // $('#wrapper > ul > li:eq(2) > ul');
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4 </li>
<li class="newElement'>3-5 </li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
⑥ prependTo(target) 메서드 활용_자식엘리먼트 중 맨 앞으로 이동시킵니다.
<style>
. newElement { color:red; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li:eq(2) > ul');
$('.newElement').prependTo(el);
});
</script>
[ 변경 전 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul> // $('#wrapper > ul > li:eq(2) > ul');
<li>3-1 </li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<li class="newElement">3-0</li>
</body>
</html>
[ 변경 후 ]
<body>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li class="newElement">3-0</li>
<li>3-1 </li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
