jquery 객체 편집 메서드

📖객체 편집 메서드★★★★★

선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 메서드들로 이루어져 있다.

1. before() / insertBefore() / after() / insertAfter()

before() / insertBefore()메서드는 선택한 요소의 이전 위치에 새 요소를 생성하고, after() / insertAfter()메서드는 선택한 요소의 다음 위치에 새 요소를 생성한다.

[기본형]

-$("요소선택").before('새 요소');
-$('새 요소').insertBefore('요소 선택')
-$("요소선택").after('새 요소');
-$('새 요소').insertAfter('요소 선택')

---

2. append() / appendTo() / prepend() / prependTo()

선택한 요소 내의 첫 번째 위치와 마지막 위치에 새 요소를 추가하는 메서드

[기본형]

- $('요소선택').append('새 요소')
- $('새 요소').appendTo('요소 선택')
: 선택한 요소 내의 마지막 위치에 새 요소를 추가함.
- $('요소선택').prepend('새 요소')
- $('새 요소').prependTo('요소 선택')
: 선택한 요소 내의 첫 번째 위치에 새 요소를 추가함.

3. replaceAll() /replaceWith()

replaceAll() /replaceWith()메서드는 선택한 요소를 새 요소로 바꿀 때 사용한다.
주로 선택한 모든 요소를 한꺼번에 바꿀 때 사용한다.

[기본형]

-$('새 요소').replaceAll('요소 선택')
-$('요소 선택').replaceWith('새 요소')

$("h2").replaceWith("<h3>replaceWith</h3>"); 을 입력하면 아래와 같이 h3태그에 적용된다. 

---

4. 기능사문제★unwrap() / wrap() / wrapAll() / wrapInner()

unwrap()메서드는 선택한 요소의 부모요소를 삭제한다.
wrap()메서드는 선택한 요소를 각각 새 요소로 감싼다.
wrapAll() 선택한 요소를 한꺼번에 새 요소로 감싼다.
wrapInner()는 선택한 요소의 하위 요소를 새 요소로 감싼다.

[기본형]

-$('요소선택').unwrap();
-$('요소선택').wrap('새 요소');
-$('요소선택').wrapAll('새 요소');
-$('요소선택').wrapInner('새 요소');

//strong태그의 부모인 h1을 삭제하기
        $("strong").unwrap();
        //.ct1을 div로 각각 감싸기
        $(".ct1").wrap("<div/>");

        //.ct2를 div로 한번에 감싸기
        $(".ct2").wrapAll("<div/>");
        //li를 h3으로 감싸기
        $(".menu li").wrapInner("<h3/>");