반응형



<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="http://code.jquery.com/jquery.min.js"></script> </head> <body id = "body"> <ol id="ol"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li id='li4'><a href="#">4</a></li> </ol> <div id = 'ul'> <li id = 'target'>A</li> <li>B</li> <li>C</li> <li>D</li> </div> <script> //var ul = document.getElementById('ul'); $('#ul').prepend('프리펜드'); // ul 시작후 첫번쨰 노드에 $('#ul').append('어펜드'); // ul 시작후 마지막 노드에 $('#ul').before('비포'); // ul 노드 시작전에 $('#ul').after('에프터'); //ul 노드 끝난 후에 //만약 추가할 대상이 제쿼 객체라면 해당 엘리먼트가 지정된 api로 이동이된다 </script> </body> </html>

​

​

위 예제의 결과

​

​

​

제이쿼리 NODE의 REMOVE 와 EMPTY

REMOVE --> 선택된 엘리먼트만을 제거

EMPTY --> 선택된 엘리먼트의 텍스트만을 제거

$('#target').remove(); //타겟 엘리먼트를 제거 $('#target').empty(); // 타겟 엘리먼트의 들어있는 텍스트 노드만 제거

​

​

제이쿼리 NODE의 replaceWith와 replaceAll

replaceWith --> 제어대상을 먼저 지정

replaceAll --> 제어대상을 인자로 전달

clone --> 대상 복사

$('#target').replaceWith($('#source').clone); //인자가 앞에 있음 $('#source').clone().replaceAll('#target'); // 인자가 뒤에 있음

​

​


반응형

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27

+ Recent posts

티스토리툴바