기존 element를 조작하기
기존 element 의 내부에 새로운 element나 content를 추가할 수 있다. 크게 네가지 메소드가 존재한다.
- .append() : 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
- .prepend() : 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
- .appendTo() : 선택된 요소를 해당 요소의 마지막에 추가한다.
- .prependTo() : 선택된 요소를 해당 요소의 첫번째에 추가한다.
.append() 메소드
.append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.
$(target).append(source)
source 객체를 target 객체의 마지막에 추가한다.
예시
<!DOCTYPE html>
<html lang="en">
<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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>This is .append() method</h1>
<ol id="list">
<li>The first item</li>
<li>Second item</li>
</ol>
<button>Add Item</button>
</body>
<script>
$(function () {
$("button").on("click", function () {
$("#list").append("<li>Newly Added Item🌺</li>");
});
});
</script>
</html>append 메소드를 이용하여 li 에 새로운 요소를 추가해보자.
다음과 같은 결과를 볼 수 있다.
Step by step goes a long way ✨