JIWON'S DEV

jQuery/기본

4. 객체 조작 - 객체 편집 메서드

dev_jiwon 2022. 6. 9.
종류
사용법
설명
before( ) /
insertBefore( )
$("요소선택").before("새요소");
$("새요소").insertBefore("요소선택");
선택한 요소 이전 위치에
새 요소를 추가합니다.
after( ) /
insertAfter( )
$("요소선택").after("새요소");
$("새요소").insertAfter("요소선택");
선택한 요소 다음 위치에 새 요소를 추가합니다.
prepend( ) /
prependTo( )
$("요소선택").prepend("새요소");
$("새요소").prependTo("요소선택");
선택한 요소의 맨 앞 위치에 새 요소를 추가합니다.
append( ) / appendTo( )
$("요소선택").append("새요소");
$("새요소").appendTo("요소선택");
선택한 요소의 마지막 위치에 새 요소를 추가합니다.
clone( )
$("요소선택").clone(true or false);
선택한 문서 객체를 복제합니다. 이때 인자값이 true일 경우 하위 요소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제합니다.
empty( )
$("요소선택").empty( );
선택한 요소의 하위 내용들을 모두 삭제합니다.
remove( )
$("요소선택").remove( );
선택한 요소를 삭제합니다.
replaceWith( ) /
replaceAll( ) /
$("요소선택").replaceWith("새요소");
$("새요소").replaceAll("요소선택");
선택한 요소들을 새 요소로
교체합니다.
unwrap( )
$("요소선택").unwrap( );
선택한 요소에 부모 요소를
삭제합니다.
wrap( )
$("요소선택").wrap(새요소);
선택한 요소를 새 요소로 각각
감쌉니다.
wrapAll( )
$("요소선택").wrapAll(새요소);
선택한 요소를 새 요소로
한꺼번에 감쌉니다.
wraplnner( )
$("요소선택").wrapInner(새요소););
선택한 요소 내에 내용을 새 요소로 각각 감쌉니다.

[출처] 4_객체 조작|작성자 구름

 

ㅇㅇㅇㅇㅇㄴ안녕

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("#myList").before("<li>새 내용 추가1</li>");
            $("#myList").after("<li>새 내용 추가2</li>");
        });
    </script>
</head>
<body>
    <ul>
        <li id="myList">내용</li>
    </ul>
</body>
</html>

 

ㅇㅇ

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("#listZone").append("<li>새 내용 추가2</li>");
            $("<li>새 내용 추가1</li>").prependTo("#listZone");
        });
    </script>
</head>
<body>
    <ul id="listZone">
        <li>내용</li>
    </ul>
</body>
</html>

 

ㄷㄷ

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function () {
            $("<li>새 내용 추가1</li>").insertBefore("#myList");
            var copy_obj = $("#myList").clone();
            $(copy_obj).insertAfter("#myList");
        });
    </script>
</head>

<body>
    <ul>
        <li id="myList">내용</li>
    </ul>
</body>

</html>

 

 

ㄴㄴㄴ

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <style type="text/css">
        #line_1{
            background-color: yellow;
        }

        #line_2{
            background-color: orange;
        }
    </style>

    <script>
        $(function(){
            $("#line_1").empty();
            $("#line_2").remove();
        });
    </script>
</head>
<body>
    <ul>
        <li id="line_1">내용1</li>
        <li id="line_2">내용2</li>
    </ul>
</body>
</html>

 

 

ㄹㄹㄹ

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("h2").replaceWith("<h3>replace method</h3>");
            $("<h4>내용3</h4>").replaceAll("p");
        });
    </script>
</head>
<body>
    <h2>교체 메서드</h2>
    <p>내용1</p>
    <p>내용2</p>
</body>
</html>

 

 

 

ㄷㄷㄷㄷㄷㄷ

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("strong").unwrap();
            $(".ct1").wrap("<div />");
            $(".ct2").wrapAll("<div />");
            $("li").wrapInner("<h3 />");
        });
    </script>

    <style>
        div{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h1 id="tit_1"><strong>객체 조작 및 생성</strong></h1>
    <p class="ct1">내용1</p>
    <p class="ct1">내용2</p>
    <p class="ct2">내용3</p>
    <p class="ct2">내용4</p>
    <ul>
        <li>내용3</li>
        <li>내용4</li>
    </ul>
</body>

</html>

 

 

 

 

ㅇㅇㅇㅇ

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function () {
            $("h1").attr("align", "left");
            $("li:first").text("첫 번째 리스트");
            $("h2 > strong").css("color", "red");
            $("#two").prev().css("color", "blue");
            $("#two").next().css("color", "purple");
            $("#two").parent().css("border", "2px dashed navy");
            $(".myList").prepend("<li>Front</li>");
            $(".myList").append("<li>back</li>");
            $("<li>앞에 삽입</li>").insertBefore(".three");
            $("<li>뒤에 삽입</li>").insertAfter(".three");
            $("h2").eq(1).wrap("<div/>");
            $("h2:has('strong')").addClass("tit");
            $("h2:last").removeClass("tit");
        });
    </script>

    <style>
        h1 {
            text-align: center;
        }

        div {
            background-color: yellow;
        }

        .tit {
            background-color: orange;
        }
    </style>
</head>

<body>
    <h1><strong>내용1</strong></h1>
    <h2><strong>내용2</strong></h2>
    <h2>내용3</h2>
    <h2 class="tit">내용4</h2>
    <ul class="myList">
        <li>리스트1</li>
        <li id="two">리스트2</li>
        <li class="three">리스트3</li>
        <li>리스트4</li>
    </ul>
</body>

</html>

 

 

'jQuery > 기본' 카테고리의 다른 글

input form reset function  (0) 2022.10.17
4. 객체 조작 - 예제  (0) 2022.06.09
4. 객체조작 - 수치조작 메소드  (0) 2022.06.08
4. 객체 조작 - 속성 조작 메소드  (0) 2022.06.08
step2 - 종합  (0) 2022.06.02

댓글

티스토리툴바