jQuery after, insertAfter & before, insertBefore
메 소 드 | 내 용 |
after() | 지정한 요소 뒤에 새로운 요소를 삽입 A.after(B) - A 뒤에 B를 추가 |
insertAfter() | 지정한 요소 뒤에 새로운 요소를 삽입 A.insertAfter(B) - B 뒤에 A 를 추가 |
before() | 지정한 요소 시작 부분에 내용을 삽입 A.berfore(B) - A 앞에 B를 추가 |
insertBefore() | 지정한 요소 시작 부분에 내용을 삽입 A.insertBefore(B) - B 앞에 A 를 추가 |
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="container">
<h2>Greetings</h2>
<div id="one">Div #1</div>
<div id="two">Div #2</div>
<div id="three">Div #3</div>
<div id="four">Div #4</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$('#one').before('<p>This is before()</p>');
$('#two').after('<p>This is after()</p>');
$( "<p>this is insertBefore()</p>" ).insertBefore( "#three" );
$( "<p>this is insertAfter()</p>" ).insertAfter( "#four" );
});
</script>