[jQuery] jQuery를 이용한 DOM 변경
2021. 11. 29. 14:46ㆍHTML&CSS&JavaScript/jQuery
반응형
jQuery를 이용하여 DOM요소를 변경,삭제,추가 할 수 있다.
| 요소의 내용을 가져오거나 변경할 수 있다. | text(), html() - text(): 선택된 요소의 텍스틀 반환한다. - html(): 선택된 요소의 HTML태그가 포함된 컨텐츠를 반환한다. |
| 요소의 속성을 가져오거나 변경할 수 있다. | attr() |
| 요소의 스타일 속성을 가져오거나 변경할 수 있다. | css() |
| 요소를 추가하거나 삭제 할 수 있다. | append(), remove() |
| 입력 필드의 값을 반환한다. | val() |
| 요소의 위치를 반환한다. | position() |
<!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" />
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js"
></script>
<title>Document</title>
</head>
<body>
val()예제 입력: <input type="text" id="val" />
<button id="text">val()예제</button>
<script>
$(document).ready(function () {
$("#text").click(function () {
alert($("#val").val());
});
});
</script>
</body>
</html>val() 예제이다.
DOM에 요소 추가하기
jQuery에서 새로운 컨텐츠를 추가할때 사용되는 4개의 메서드가 있다.
| append() | 선택된 요소의 끝(end)에 새로운 콘텐츠 추가 |
| prepend() | 선택된 요소의 처음(begining)에 새로운 콘텐츠 추가 |
| after() | 선택된 요소의 뒤에 컨텐츠를 삽입 |
| before() | 선택된 요소의 앞에 콘텐츠를 삽입 |
DOM 요소 컨텐츠 삭제하기
| remove() | 선택된 요소와 그 자식 요소를 삭제한다 |
| empty() | 선택된 요소의 자식 요소를 삭제한다. |
remove()와 empty()의 차이점에 대해 알아보자.
remove()는 선택된 요소와 함께 자식 요소들도 전부 삭제한다.
empty()는 선택된 요소는 그대로 두고 자식 요소들만 삭제 한다.
<!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" />
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js"
></script>
<style>
.container {
height: 80px;
width: 200px;
border: 1px solid black;
}
p {
background-color: yellow;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<p class="hello">Hello</p>
<p class="goodbye">goodbye</p>
</div>
<button id="btn1">remove()</button>
<button id="btn2">empty()</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
jQuery(".container").remove();
});
$("#btn2").click(function () {
jQuery(".container").empty();
});
});
</script>
</body>
</html>반응형
'HTML&CSS&JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] Ajax (0) | 2021.11.30 |
|---|---|
| [jQuery] fadeIn()/fadeOut() (0) | 2021.11.29 |
| [jQuery] animate() (0) | 2021.11.29 |
| [jQuery] toggle() (0) | 2021.11.29 |