jQuery: method - 객체 편집 메서드

 

 

객체편집 메서드

 

가상요소 추가하기

 

before&after

css처럼 제이쿼리에서도 마크업에 없는 가상 요소를 추가할 수 있다.

차이점은 css에서는 가상선택자 before, after가 inline요소이지만,

제이쿼리에서 before, after는 block 요소이다.

 

    $(function(){
        $("p").before("before");
        $("p").after("after");
    })

 

prepend&append

prepend, append를 사용하면 inline 요소로 넣을 수 있다.

독립된 요소라기 보다는 아래 예제에서 p 태그 안으로 내용이 추가 된다고 보면 된다.

    $(function(){
        $("p").prepend("prepend");
        $("p").append("append");
    })

 

prependTo&appendTo

역시 inline 요소 인데, 선택자를 기준요소안의 앞 뒤로 이동한다.

append, prepend와 같이 주어태그 전체가 목적어태그 안으로 들어간다.

        $(function(){
//            .text1을 .text2 선택자 안의 마지막 요소로 추가
            $(".text1").appendTo(".text2");
            
//            .text2를 .text1 선택자 안의 첫 요소로 추가
            $(".text2").prependTo(".text1");
        })

※ 가독성을 위해 주석처리를 생략했지만 동시에 실행되지는 않는다.

 

insertBefore,insertAfter

block 요소로 주어태그를 목적어태그 앞 뒤로 이동한다

    $(function(){
        $(".text3").insertBefore(".text2");
        $("h1").insertAfter(".text1");
    })

 

clone

다른 메서드들처럼 단독으로 사용되지는 않음.

다른 메서드들이 동사라면 clone은 대명사라고 생각하면 될 듯.

    $(function(){
        var result = $("ul").clone();
        $("ol").append(result);
    })

 

부모태그 추가

말그대로 wraping 하는 태그를 추가

wrap 선택 요소 감싸기

wrapAll 선택한 요소 전부 묶어 감싸기

wrapInner 요소의 내용물만 감싸기

unwrap 부모 요소 해제하기

 

        $(function() {
            //p를 div로 각각 감싸기
            $("p").wrap("<div>");

            //p를 div로 감싸기 한번에
            $("p").wrapAll("<div>");

            //li를 div로 감싸기
            $("li").wrapInner("<div>");
            
            //ol 감싸기 해제
             $("ol>li").unwrap();
        })

 

 

 

remove& empty

remove는 태그까지 삭제시키고,

empty는 태그는 살리고 내용물만 비움.

        $(function(){
            //ul>li remove
            $("ul>li").remove(); //li가 사라짐
            //ol>li empty
            $("ol>li").empty(); //li의 내용물만 사라짐
        })

 

replaceAll&replaceWith

둘다 내용물을 바꾸는 것이지만, 문법이 다름

목적어태그.replaceAll(주어태그)

주어태그.replaceWith(목적어태그)

    $(function(){
        $("<strong>jQuery</strong>").replaceAll("p");
        $("div").replaceWith("<em>jQuery</em>");
    })