jQuery
jQuery - before()
행복하게사는게꿈
2020. 6. 23. 15:15
.before()
- 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다.
문법
.before( content [, content])
예를 들어
$('h1').before('<p>hello</p>')는 h1 요소 앞에 hello를 내용으로 갖는 p요소를 추가한다.
$('h1.a').before($('p.b'));는 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동시킨다.
예제1
- p요소 앞에 오오오를 내용으로 갖는 h1 요소를 추가
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'p' ).before( '<h1>오오오</h1>' );
} );
</script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
예제2
- h1 요소 뒤에 있던 p요소를 h1 요소 앞으로 이동시킨다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1' ).before( $( 'p' ) );
} );
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
<p>Goodbye World!</p>
</body>
</html>
* 선택한 요소 앞에 요소를 추가하거나 이동시킨는 것은 .after() 로 한다.