728x90
오늘은 제이쿼리를 사용해 선택된 요소에 html 코그를 추가하는 방법에 대해 알아보도록 하겠습니다.
append, prepend를 사용하면 손쉽게 구현할 수 있습니다.
|
메서드 |
설명 |
|
.append() |
마지막에 추가할 때 사용 |
|
.prepend() |
맨 앞에 추가할 때 사용 |
1.append
$(요소 선택).append(추가할 html 코드)$를 통해 클래스나, id를 선택하고
추가할 html 코드를 넣어 추가해 줄 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ol id="item">
<li>item1</li>
<li>itme2</li>
</ol>
<script>
$("#item").append("<li>item3</li>");
</script>
</body>
</html>
마지막 요소에 html 코드가 추가됩니다.
첫 번째에 추가하고 싶다면 prepend를 사용하시면 됩니다.
2.prepend.
$(클래스나 id선택).prepend(추가할 html코드)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ol id="item">
<li>item1</li>
<li>itme2</li>
</ol>
<script>
$("#item").prepend("<li>item3</li>");
</script>
</body>
</html>
위와 같은 결과가 나옵니다.
728x90
'기타 > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 선택자 여소 여러개 선택하기 (0) | 2021.02.03 |
|---|---|
| [jQuery] 제이쿼리 선택자 (0) | 2021.02.03 |
| [jQuery] 제이쿼리 each 함수 (0) | 2021.02.02 |
| [jQuery] 제이쿼리 요소 삭제(remove, empty) (0) | 2021.02.02 |
| [jQuery] 제이쿼리 cdn으로 사용하기 (0) | 2021.02.01 |
