jQuery
jQuery - .append()
행복하게사는게꿈
2020. 6. 23. 14:57
.append()
- 선택한 요소의 내용의 끝에 컨텐츠를 추가.
문법
.append(content [, content])예제1
예를 들어
<p>안녕하세요</p>
가 있을 때,
$('p').append(' 123');
를 하면
<p>안녕하세요 123</p> 가 출력
예제2
- 순서 없는 목록 마지막에 안녕하세요 추가
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
line-height: 2;
font-family: sans-serif;
font-size: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'ul' ).append( '<li>Dolor</li>' );
} );
</script>
</head>
<body>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</body>
</html>
예제2
- strong 요소를 p 요소의 내용의 끝으로 이동시킨다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
line-height: 2;
font-family: sans-serif;
font-size: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'p' ).append( $( 'strong' ) );
} );
</script>
</head>
<body>
<p>abc</p>
<strong>XYZ</strong>
</body>
</html>
* 선택한 요소의 내용의 앞에 내용을 추가할 때는 .prepend() 사용
* .appendTo() 와 기능이 거의 동일하나
a.append('b') -> a에 b컨텐츠 삽입
, a.appendTo('b') -> b에 a 컨텐츠 삽입