티스토리 뷰

jQuery

[jQuery] .append()

.append()

선택한 요소 마지막 위치에 새로운 요소를 추가합니다.


.append()

선택한 요소 마지막 위치에 새로운 요소를 추가합니다.

문법(Syntax)

$("선택자").append("텍스트");
$("선택자").append("선택자");
$("선택자").append("함수");

정의(Definition)

  • .append("텍스트") 메서드는 선택한 마지막 요소에 새로운 텍스트 추가합니다.
  • .append("선택자") 메서드는 선택한 마지막 요소에 새로운 선택자를 추가합니다.
  • .append("함수") 메서드는 선택한 마지막 요소에 함수를 설정합니다.

샘플(Sample)

.append() : 선택한 요소를 마지막 요소에 추가하는 예제입니다.

Sample1

속성(Attributes)

  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list1 ul").append("<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>");
});
$(".choice1 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list1 ul").prepend("<li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>");
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
    <ul>
        <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
        <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <ul>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="btn1">마지막 요소에 컨텐츠를 추가합니다.</a>
        <a href="#" class="btn2">처음 요소에 컨텐츠를 추가합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 ul").append("<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>");
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 ul").prepend("<li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>");
        });
    </script>

</body>
</html>

샘플(Sample)

.append() : 선택한 요소를 마지막 요소에 추가하는 예제입니다.

Sample2

속성(Attributes)

  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
 $(".choice2 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list2 ul").append( $("h3") );
});
$(".choice2 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list2 ul").prepend( $("h3") );
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
    <ul>
        <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
        <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(Attributes)</h3>
    <div class="list2">
        <ul>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="btn1"><em>h3 요소</em>를 마지막 요소에 추가합니다.</a>
        <a href="#" class="btn2"><em>h3 요소</em>를 처음 요소에 추가합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 ul").append( $("h3") );
        });
        $(".choice2 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list2 ul").prepend( $("h3") );
        });
    </script>

</body>
</html>

응용 샘플(Sample)

이미지 랜덤으로 나오게 하는 예제입니다.

jquery
$(".choice3 .btn1").click(function(e){
    e.preventDefault();
    $(".list3 ul").append("<li><img src='https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg' alt='' width='100'></li>" );
});
$(".choice3 .btn2").click(function(e){
    e.preventDefault();
    $(".list3 ul").prepend("<li><img src='https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg' alt='' width='100'></li>" );
});
$(".choice3 .btn3").click(function(e){
    e.preventDefault();
    $(".list3 ul li:last").remove();
});
$(".choice3 .btn4").click(function(e){
    e.preventDefault();
    $(".list3 ul li:first").remove();
});

//이미지가 랜덤으로 나오는 함수
function random(){
    var imgNumber = Math.ceil(Math.random()*9);
    //alert(imgNumber);
    var imgPath = "<li><img src='https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover0"+imgNumber+".jpg' alt='' width='100'></li>";
    //alert(imgPath);
    return imgPath;
}

$(".choice3 .btn5").click(function(){
    $(".list3 ul").append(random);
});
html
 <h3>이미지 랜덤으로 나오기</h3>
<div class="list3">
    <ul>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="" width="100"></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" alt="" width="100"></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="" width="100"></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="" width="100"></li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
        .img_random li {display: inline-block;}
    </style>
</head>
<body>
    
    <h3>이미지 랜덤으로 나오기</h3>
    <div class="list3">
        <ul>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="" width="100"></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" alt="" width="100"></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="" width="100"></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="" width="100"></li>
        </ul>
    </div>
    
    <div class="choice3">
        <a href="#" class="btn1">클릭하면 리스트 뒤쪽에 이미지가 추가됩니다.</a><br>
        <a href="#" class="btn2">클릭하면 리스트 앞쪽에 이미지가 추가됩니다.</a><br>
        <a href="#" class="btn3">클릭하면 리스트 뒤쪽에 이미지를 삭제합니다.</a><br>
        <a href="#" class="btn4">클릭하면 리스트 앞쪽에 이미지를 삭제합니다.</a><br>
        <a href="#" class="btn5">클릭하면 리스트 뒤쪽에 이미지를 랜덤으로 추가합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .btn1").click(function(e){
            e.preventDefault();
            $(".list3 ul").append("<li><img src='https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg' alt='' width='100'></li>" );
        });
        $(".choice3 .btn2").click(function(e){
            e.preventDefault();
            $(".list3 ul").prepend("<li><img src='https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg' alt='' width='100'></li>" );
        });
        $(".choice3 .btn3").click(function(e){
            e.preventDefault();
            $(".list3 ul li:last").remove();
        });
        $(".choice3 .btn4").click(function(e){
            e.preventDefault();
            $(".list3 ul li:first").remove();
        });
        
        //이미지가 랜덤으로 나오는 함수
		function random(){
			var imgNumber = Math.ceil(Math.random()*9);
			//alert(imgNumber);
			var imgPath = "<li><img src='https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover0"+imgNumber+".jpg' alt='' width='100'></li>";
			//alert(imgPath);
			return imgPath;
		}
		
		$(".choice3 .btn5").click(function(){
			$(".list3 ul").append(random);
		});
    </script>
</body>
</html>

응용 샘플(Sample)

2초에 한번씩 이미지가 변하는 예제입니다.

Sample4

2초에 한번씩 이미지 이동하기

jquery
$(".choice4 .btn1").click(function(){
    setInterval(function(){
        $(".list4 img").last().prependTo(".list4");
    },2000);
});
html
<h3>2초에 한번씩 이미지 이동하기</h3>
<div class="list4">
    <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="" width="150">
    <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="" width="150">
    <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover06.jpg" alt="" width="150">
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
        .img_random li {display: inline-block;}
    </style>
</head>
<body>
    
    <h3>2초에 한번씩 이미지 이동하기</h3>
    <div class="list4">
        <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="" width="150">
        <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="" width="150">
        <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover06.jpg" alt="" width="150">
    </div>
    
    <div class="choice4">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 이미지를 2초에 한번씩 이동합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>	
        var timer;
        $(".choice4 .off1").click(function(){
            clearInterval(timer);
        });
        $(".choice4 .btn1").click(function(){
            timer = setInterval(function(){
                $(".list4 img").last().prependTo(".list4");
            },2000);
        });
    </script>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼