반응형
[jQuery] jQuery 엘리먼트
01. 부모 엘리먼트(append)
append-1.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>append 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // 부모 엘리먼트.append(자식 엘리먼트) jQuery("#imageListDiv").append("<img src='images/0.jpg' width='200' height='200'>"); jQuery("#imageListDiv").append("<img src='images/1.jpg' width='200' height='200'>"); // 부모 엘리먼트.prepend(자식 엘리먼트) jQuery("#imageListDiv").prepend("<img src='images/2.jpg' width='200' height='200'>"); jQuery("#imageListDiv").prepend("<img src='images/3.jpg' width='200' height='200'>"); // Old 엘리먼트.before(New 엘리먼트) jQuery("#imageListDiv").before("<img src='images/4.jpg' width='200' height='200'>"); // Old 엘리먼트.after(New 엘리먼트) jQuery("#imageListDiv").after("<img src='images/5.jpg' width='200' height='200'>"); }); </script> </head> <body> <h1>엘리먼트 생성 또는 삭제</h1> <hr/> <div id="imageListDiv"></div> </body> </html> |
| 출력결과 |
appendMove.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>append 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { for(var i = 0; i < 10; i++) { jQuery("#imageListDiv").append("<img src='images/" + i + ".jpg' width='100' height='100'>"); } // 1초마다 첫번째 이미지가 마지막으로 이동 setInterval(function() { jQuery("#imageListDiv img").first().appendTo("#imageListDiv"); }, 1000); }); </script> </head> <body> <h1>엘리먼트 이동</h1> <hr/> <div id="imageListDiv"></div> </body> </html> |
출력결과 |
※ 1초마다 첫번째 이미지가 마지막으로 이동
02. 자식 엘리먼트(appendTo)
append-2.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>append 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // 자식 엘리먼트.appendTo(부모 엘리먼트) => 부모 엘리먼트의 마지막 자식엘리먼트로 부착 jQuery("<img src='images/0.jpg' width='200' height='200'>").appendTo("#imageListDiv"); jQuery("<img src='images/1.jpg' width='200' height='200'>").appendTo("#imageListDiv"); // 자식 엘리먼트.prependTo(부모 엘리먼트) => 부모 엘리먼트의 첫번째 자식엘리먼트로 부착 jQuery("<img src='images/2.jpg' width='200' height='200'>").prependTo("#imageListDiv"); jQuery("<img src='images/3.jpg' width='200' height='200'>").prependTo("#imageListDiv"); // New 엘리먼트.insertBefore(Old 엘리먼트) => Old 엘리먼트 전에 New엘리먼트 부착(형제 관계) jQuery("<img src='images/4.jpg' width='200' height='200'>").insertBefore("#imageListDiv"); // New 엘리먼트.insertAtfer(Old 엘리먼트) => Old 엘리먼트 뒤에 New엘리먼트 부착(형제 관계) jQuery("<img src='images/5.jpg' width='200' height='200'>").insertAfter("#imageListDiv"); }); </script> </head> <body> <h1>엘리먼트 생성 또는 삭제</h1> <hr/> <div id="imageListDiv"></div> </body> </html> |
| 출력결과 |
03. 삭제하는 remove 엘리먼트
01. 기본화면
remove.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>append 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> </script> </head> <body> <h1>엘리먼트 생성 또는 삭제</h1> <hr/> <div id="imageListDiv"> <img src='images/0.jpg' width='200' height='200'> <img src='images/1.jpg' width='200' height='200'> <img src='images/2.jpg' width='200' height='200'> </div> </body> </html> |
| 출력결과 |
02. remove 엘리먼트로 전체 삭제
| remove-1.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>append 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // 엘리먼트.remove() => 엘리먼트를 삭제하는 메소드 jQuery("#imageListDiv").remove(); }); </script> </head> <body> <h1>엘리먼트 생성 또는 삭제</h1> <hr> <div id="imageListDiv"> <img src='images/0.jpg' width='200' height='200'> <img src='images/1.jpg' width='200' height='200'> <img src='images/2.jpg' width='200' height='200'> </div> </body> </html> |
| 출력결과 |
03. remove 엘리먼트로 선택 삭제
| remove-2.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>append 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // 엘리먼트.remove() => 엘리먼트를 삭제하는 메소드 jQuery("#imageListDiv").children().eq(1).remove(); }); </script> </head> <body> <h1>엘리먼트 생성 또는 삭제</h1> <hr> <div id="imageListDiv"> <img src='images/0.jpg' width='200' height='200'> <img src='images/1.jpg' width='200' height='200'> <img src='images/2.jpg' width='200' height='200'> </div> </body> </html> |
출력결과 |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] input 이벤트 (0) | 2015.12.29 |
|---|---|
| [jQuery] checkbox 이벤트 (1) | 2015.12.29 |
| [jQuery] jQuesy 이벤트 (0) | 2015.12.20 |
| [jQuery] text 메소드와 html 메소드 (0) | 2015.12.20 |
| [jQuery] attr 메소드 (0) | 2015.12.20 |
