[jQuery] DOM 추가 삭제
2022. 6. 10. 18:16ㆍJavaScript/jQuery
1. append, prepend
- append : html 코드나 태그를 태그 내부의 뒤에 추가합니다.
- prepend : html 코드나 태그를 태그 내부의 앞에 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function append1(){
$("#a1").append("<p>새롭게 추가한 p1</p>");
}
function append2(){
const p = $("<p>");
p.text("새롭게 추가한 p2");
$("#a1").append(p);
}
function prepend1(){
$("#a1").prepend("<p>새롭게 추가한 p3</p>");
}
function prepend2(){
const p = $("<p>");
p.text("새롭게 추가한 p4");
$("#a1").prepend(p);
}
</script>
<style>
#a1{
border : 1px solid black;
}
</style>
</head>
<body>
<div id="a1">
<p>p 태그</p>
</div>
<button onclick="append1()">HTML 코드를 뒤에 추가</button>
<button onclick="append2()">HTML 객체를 뒤에 추가</button>
<button onclick="prepend1()">HTML 코드를 앞에 추가</button>
<button onclick="prepend2()">HTML 객체를 앞에 추가</button>
</body>
</html>
위 실행결과는 "HTML 코드를 뒤에 추가" 버튼을 누르고 "HTML 객체를 뒤에 추가" 버튼을 누른 결과입니다.
위 실행결과는 "HTML 코드를 앞에 추가" 버튼을 누르고 "HTML 객체를 앞에 추가" 버튼을 누른 결과입니다.
2. after, before
- after : html 코드나 태그를 태그 다음에 배치합니다.
- before : html 코드나 태그를 태그 앞에 배치합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function after1(){
$("#a1").after("<p>새롭게 추가한 p태그 1</p>");
}
function after2(){
const p = $("<p>");
p.text("새롭게 추가한 p태그 2");
$("#a1").after(p);
}
function before1(){
$("#a1").before("<p> 새롭게 추가한 p태그 3</p>");
}
function before2(){
const p = $("<p>");
p.text("새롭게 추가한 p 태그 4");
$("#a1").before(p);
}
</script>
<style>
#a1{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="a1">
<p>p 태그</p>
</div>
<button onclick="after1()">html 코드를 뒤에 추가</button>
<button onclick="after2()">html 객체를 뒤에 추가</button>
<button onclick="before1()">html 코드를 앞에 추가</button>
<button onclick="before2()">html 객체를 앞에 추가</button>
</body>
</html>
위 실행결과는 "html 코드를 뒤에 추가" 버튼을 누르고 "html 객체를 뒤에 추가" 버튼을 누른 결과입니다.
위 실행결과는 "html 코드를 앞에 추가" 버튼을 누르고 "html 객체를 앞에 추가" 버튼을 누른 결과입니다.
3. remove, empty
- remove : 태그를 제거합니다
- empty : 태그 내의 모든 태그를 제거합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function remove_a2(){
$("#a2").remove();
}
function empty_a1(){
$("#a1").empty();
}
</script>
<style>
#a1{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="a1">
<p>p 태그</p>
<p id="a2">id가 a2인 p 태그</p>
<p>p 태그</p>
</div>
<button onclick="remove_a2()">a2 제거</button>
<button onclick="empty_a1()">a1 태그 내부의 모든 태그 제거</button>
</body>
</html>
위 실행결과는 "a2 제거" 버튼을 누른 결과입니다.
위 실행결과는 "a1 태그 내부의 모든 태그 제거" 버튼을 누른 결과입니다.
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/AddRemove/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 태그 탐색 1 (parent, child) (0) | 2022.06.13 |
|---|---|
| [jQuery] CSS 제어 (0) | 2022.06.13 |
| [jQuery] DOM 제어하기 (0) | 2022.06.10 |
| [jQuery] jQuery 이벤트 함수 (0) | 2022.06.10 |
| [jQuery] Form 태그 선택자 (0) | 2022.06.10 |