프로그래밍/jQuery 👍

jQuery after, insertAfter & before, insertBefore 알아보기

재우니 2019. 8. 28. 18:11



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>