Front/jQuery
jQuery - DOM 요소 조작
by Hyeon_
2021. 12. 15.
jQuery DOM 요소 조작
- 동적으로 쉽고 간단하게 DOM 요소 조작 가능
- DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성
DOM 요소 조작 관련 메소드
text() : 글자와 관련된 내용을 반환하거나 설정html() : HTML과 관련된 내용을 반환하거나 설정$(선택자).append(A) : 선택자의 내부 요소들 맨 뒤에 A를 삽입$(선택자).prepend(A) : 선택자의 내부 요소들 맨 앞에 A를 삽입$(A).apeentTo(선택자) : A를 선택자의 내부 요소들 맨 뒤에 삽입$(A).prependTo(선택자) : A를 선택자의 내부 요소들 맨 앞에 삽입$(선택자).after(A) : 선택자 뒤에 A 삽입$(선택자).before(A) : 선택자 앞에 A 삽입$(A).insertAfter(선택자) : A를 선택자의 뒤에 삽입$(A).insertBefore(선택자) : A를 선택자의 앞에 삽입$(선택자).remove() : 해당되는 요소 제거$(선택자).empty() : 해당되는 요소의 모든 자식 노드 제거
text()와 html() 메소드
- 자바스크립트의 innerHTML 속성과 유사
- 찾은 DOM 요소의 글자(텍스트)를 설정하거나 반환
- html() : HTML 태그 인식 (태그 효과 적용)
- text() : HTML 태그 인식하지 못하고 글자로 인식 (그대로 출력)
DOMtextHtml.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. text() : 문자열만 반환 (태그 제외)
var aText = $('#a').text(); // 괄호 안에 인자 없으면 get()의 의미
alert("text: " + aText); // A
// 2. html() :
var bHtml = $('#b').html();
alert('html: ' + bHtml); // <h3>B</h3>
// 3, text(문자열) : <h1>을 태그로 인식하지 못하고 문자열로 취급
$('#a').text('<h1>jQuery</h1>'); // 괄호 안에 값이 있으면 set의 의미
// 4. html(문자열) : <h1> 을 태그로 인식해 값만 출력
$('#b').html('<h1>jQuery</h1>');
});
</script>
</head>
<body>
<div id="a"><h3>A</h3></div>
<div id="b"><h3>B</h3></div>
</body>
</html>
append() 예제
DOMappend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#box {
width: 500px;
height : 200px;
line-height: 200px;
border: 1px solid #000;
}
img { vertical-align: middle;}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var img = "<img src='image/banana.png'>";
// [prepend] 버튼 클릭 시
// 선택자 box 내부 요소들 맨 앞에 img 삽입
$('#prepend').on('click', function(){
$('#box').prepend(img);
});
// [append] 버튼 클릭 시
// 선택자 box 내부 요소들 맨 뒤에 img 삽입
$('#append').on('click', function(){
$('#box').append(img);
});
// [before] 버튼 클릭 시
// 선택자 box 앞에 img 삽입 (div 외부에 추가)
$('#before').on('click', function(){
$('#box').before(img);
});
// [after] 버튼 클릭 시
// 선택자 box 뒤에 img 삽입 (div 외부에 추가)
$('#after').on('click', function(){
$('#box').after(img);
});
// [empty] 버튼 클릭 시
// 선택자 box 뒤에 img 삽입 (div 외부에 추가)
$('#empty').on('click', function(){
$('#box').empty();
});
// [remove] 버튼 클릭 시
// <img> 태그 제거
$('#remove').on('click', function(){
$('img').remove();
});
// [initiate] 버튼 클릭 시
// 선택자 box 내부 요소들 맨 뒤에 img 삽입
$('#initiate').on('click', function(){
$('img').remove();
$('#box').empty().append("div 내부 <img src=\"image/apple.png\">");
});
});
</script>
</head>
<body>
<button id="prepend">prepend</button>
<button id="append">append</button>
<button id="before">before</button>
<button id="after">after</button>
<button id="empty">empty</button>
<button id="remove">remove</button>
<button id="initiate">초기화</button>
<div id="box">
div 내부
<img src="image/apple.png">
</div>
</body>
</html>