-
jQuery - .append()jQuery 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 컨텐츠 삽입
'jQuery' 카테고리의 다른 글
jQuery - before() (0) 2020.06.23 jQuery - .attr() (0) 2020.06.23 JQuery - .animate() (0) 2020.06.23 jQuery( .after() ) (0) 2020.06.23 ajax (기초) (0) 2020.05.06