설명
1) class id "target" 위 아래에 before/prepend/target/append/after 순으로 추가한다
2) 해당노드를 삭제 첫번째 버튼은 노드전체, 두번째는 tag는 남겨두고, 내용만 없앤다
remove(), empty()
3) 해당노드로 치환한다. clone() 함수 사용
4) 노드치환 replaceAll, replaceWith 함수 이용 (소스 주석참조)
5) 노드이동 (소스 주석참조)
- 실행화면
Gist 소스
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div class="target" id="t1"> | |
| content1 | |
| </div> | |
| <div class="target" id="t2"> | |
| content2 | |
| </div> | |
| <div id="source"> Source </div> | |
| <input type="button" value="remove tag1" id="btn1"> | |
| <input type="button" value="empty tag2" id="btn2"> | |
| <input type="button" value="ReplaceAll" id="btn3"> | |
| <input type="button" value="ReplaceWith" id="btn4"> | |
| <input type="button" value="Clone ReplaceAll" id="btn5"> | |
| <input type="button" value="Clone ReplaceWith" id="btn6"> | |
| <input type="button" value="Move Node" id="btn7"> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <!-- DOM Tag작업 --> | |
| <script type="text/javascript"> // tag추가하기 | |
| $('.target').before('<div>before</div>'); | |
| $('.target').after('<div>after</div>'); | |
| $('.target').prepend('<div>prepend</div>'); | |
| $('.target').append('<div>append</div>'); | |
| </script> | |
| <script type="text/javascript"> // 삭제하기 | |
| //해당tag 삭제 | |
| $('#btn1').click(function() { | |
| $('#t1').remove(); | |
| }) | |
| //내용만 삭제 | |
| $('#btn2').click(function() { | |
| $('#t2').empty(); | |
| }) | |
| </script> | |
| <script type="text/javascript"> // 치환하기 | |
| $('#btn3').click(function() { | |
| $('<div>ReplaceAll<div>').replaceAll('#t1'); | |
| // ID #t1 를 <div>ReplaceAll<div> 으로 교체 | |
| }) | |
| $('#btn4').click(function() { | |
| $('#t2').replaceWith('<div>replaceWith</div>'); | |
| // ID #t2 를 <div>replaceWith<div> 으로 교체 | |
| }) | |
| </script> | |
| <script type="text/javascript"> | |
| $('#btn5').click(function() { | |
| $('#source').clone().replaceAll('#t1'); | |
| // ID #source를 복제하여 ID #t1인 것을 교체 | |
| }) | |
| $('#btn6').click(function() { | |
| $('#t2').replaceWith($('#source').clone()); | |
| // ID #t2를 ID #source로 복제하여 교체 | |
| }) | |
| </script> | |
| <script type="text/javascript"> | |
| // ID #source를 찾아서, ID #t1을 찾아서 이동 | |
| $('#btn7').click(function() { | |
| $('#t1').append($('#source')); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
'개발ㅣ어플ㅣ회사 > 개발ㅣJavascript' 카테고리의 다른 글
| jQuery 조회범위 제한 (0) | 2020.02.11 |
|---|