공부하자
제이쿼리(J-Query) 메소드 append() 본문
제이쿼리 append() 메소드
: 제이쿼리의 기본 매소드(함수) 중 하나,append를 통해 가공하거나 추가하거나 할 수 있다.
ajax로 데이터를 불러올 때 append 메소드를 응용하여 화면 출력하는 경우가 많다.
문법
$("selector").append()
ex.
버튼을 클릭할때마다 button + '카운팅 숫자'가 적힌 박스가 출력되는 예제
$(function(){
var countNum = 0; // 카운팅을 위한 기본 변수
$(".btn").click(function(){ //클릭하면
countNum++; // 증가, 증가 연산자의 위치는 append 뒤에 와도 상관없다.
$(".section > ul").append("<li class='unit'><a href='#'>button"+countNum+"</a></li>")
// .append에 해당되는 부분은 한줄로 표현,
// 따옴표의 경우 싸고 있는 따옴표와 안에 있는 따옴표를 구분해서 사용.
// 변수 countNum 을 문자로 인식하지 않도록 ''+countNum+''
});
});
제이쿼리에서 제공하는 기본 예시
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
</body>
</html>
출력 화면 :
I would like to say: Hello
api.jquery.com/append/#append-content-content
.append() | jQuery API Documentation
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements. The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first chi
api.jquery.com
'J-Query·JavaS' 카테고리의 다른 글
| 메뉴 클릭시 활성화 시키기 (0) | 2021.07.12 |
|---|---|
| 유튜브 레이어 팝업 만들기 (0) | 2021.05.28 |
| 제이쿼리(J-Query) 이벤트 메소드 scroll(), scrollTop() (0) | 2021.01.08 |
| 제이쿼리(J-Query) 이벤트 메소드 keypress() (0) | 2021.01.08 |
| 제이쿼리(J-Query) 이벤트 메소드 click() (0) | 2021.01.08 |
Comments