[jQuery] .add()

.add()

선택된 요소와 새로운 요소에 추가로 선택합니다.

.add()

.add() 메서드는 선택된 요소와 새로운 요소를 추가적으로 효과를 줍니다. add()는 선택자, 객체, HTML 요소 등을 선택할 수 있습니다.

문법(Syntax)

$("선택자").add("선택자");
$("선택자").add("태그");
$("선택자").add("요소");

정의(Definition)

선택된 요소에서 선택자를 추가하여 효과를 줍니다. 또 다른 태그를 만든 것이 아니라 또 다른 효과를 주기위해 효과를 추가하는 것입니다.
선택된 요소에 추가적으로 태그를 추가하여 효과를 줄 수 있습니다.

Sample1

.add(selector) : li 선택자에 효과를 주고 추가적으로 자식 요소 span 태그에게 효과를 준 예제입니다.

결과

탐색(Traversing)

.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.

.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.

리셋 클릭하면 리스트li와 p에 동시에 효과를 줍니다. 클릭하면 리스트li요소에게 효과를 줍니다. 클릭하면 리스트p요소에게 효과를 줍니다.

jquery

$(".list1 li").add("p").addClass("rLine");
$(".list1 li").addClass("rLine");
$(".list1 p").addClass("rLine");

html

<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 <span>요소</span>에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 <span>요소</span>에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
    </ul>
    <p>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</p>
</div>

Total

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 <span>요소</span>에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 <span>요소</span>에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        </ul>
        <p>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 리스트<em>li</em>와 <em>p</em>에 동시에 효과를 줍니다.</a>
        <a href="#" class="btn2">클릭하면 리스트<em>li</em>요소에게 효과를 줍니다.</a>
        <a href="#" class="btn3">클릭하면 리스트<em>p</em>요소에게 효과를 줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 li, .list1 p").removeClass();
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").add("p").addClass("rLine");
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 li").addClass("rLine");
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list1 p").addClass("rLine");
        });
    </script>
</body>
</html>

Sample2

.add(html) : ul을 clone()을 통해 복사하면서 추가적으로 태그를 이용하여 출력할 수 있는 예제입니다. 일반적으로 태그를 추가하여 만드는 메서드는 아니지만 이런식으로 복사한 요소에 추가적으로 태그 요소를 넣을 수 있습니다. appendTo 메서드를 이용하여 list 마지막에 복사한 ul과 p태그를 넣은 예제입니다.

Sample2

탐색(Traversing)

.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.

리셋 클릭하면 리스트를 복사하여 출력합니다.

jquery

$(".list2 ul").clone().add("<p class='bLine'>마지막으로 추가</p>").appendTo(".list2");

html

<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
    </ul>
</div>

Total

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 리스트<em>li</em>와 <em>span</em>에 효과를 줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 ul:eq(1), .list2 p").remove();
        });
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 ul").clone().add("<p class='bLine'>마지막으로 추가</p>").appendTo(".list2");
        });
    </script>

</body>
</html>

호환성(Compatibility)

메서드	버전						6	7	8	9	10	11
add()	jQeury 1.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 2.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 3.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능