오봉이와 함께하는 개발 블로그
jQuery - DOM 요소 조작 본문
728x90
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 태그 인식하지 못하고 글자로 인식 (<h1> 그대로 출력)
text()와 html() 예제 - DOMtextHtml.html
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 1. text() : 문자열만 반환(태그 제외)
var aText = $('#a').text(); // 괄호안에 인자 없으면 get()의 의미
// 변수 aText는 텍스트 값을 저장한 변수 : 객체의 역할로 메소드 사용 불가
alert("text : " + aText); // text : A
// 2. html() : 태그 포함된 문자열 반환
var bHtml = $('#b').html();// 괄호안에 인자 없으면 get()의 의미
alert("html : " + bHtml); // html : <h3>B</h3>
// 3. text(문자열) : <h1>jQuery</h1> 출력 <h1>을 태그로 인식하지 못하고 문자열로 취급하여 출력됨
// aText.text('<h1>jQuery</h1>'); @@ 변수 aText는 텍스트 값을 저장한 변수 : 객체의 역할로 메소드 사용 불가
$('#a').text('<h1>jQuery</h1>'); //괄호 안에 같이 있으면 set()의 의미
// 3. html(문자열) : jQuery 출력 <h1>을 태그로 인식하여 제목이 됨.
$('#b').html('<h1>jQuery</h1>');
});
</script>
</head>
<body>
<div id="a"><h3>A</h3></div>
<div id="b"><h3>B</h3></div>
</body>append()/prepend() 예제 - DOMappend.html
<style type="text/css">
#box { width:500px; height: 200px; line-height:200px;
border:1px solid #000; }
img {vertical-align:middle;}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var img = "<img src=\"image/banana.png\">";
// prepend 버튼 클릭했을 때
// 선택자 box 내부 요소들 맨 앞에 img 삽입.
// <img src="image/banana.png"> div 내부 <img src='image/apple.png'>
$('#prepend').on('click', function() {
$('#box').prepend(img);
});
// append 버튼 클릭했을 때
// 선택자 box 내부 요소들 맨 뒤에 img 삽입.
// div 내부 <img src='image/apple.png'> <img src="image/banana.png">
$('#append').on('click', function() {
$('#box').append(img);
});
// before 버튼 클릭했을 때
// 선택자 box 요소 앞에 img 삽입.(<div> 영역 외부에 추가)
// <img src="image/banana.png">
// <div id="box">
// div 내부 <img src='image/apple.png'>
// </div>
$('#before').on('click', function() {
$('#box').before(img);
});
// after 버튼 클릭했을 때
// 선택자 box 요소 뒤에 img 삽입.(<div> 영역 외부에 추가)
// <div id="box">
// div 내부 <img src='image/apple.png'>
// </div>
// <img src="image/banana.png">
$('#after').on('click', function() {
$('#box').after(img);
});
// empty 버튼 클릭했을 때
// <div id="box"> 태그 안에 들어있는 모든 요소 제거
$('#empty').on('click', function() {
$('#box').empty();
});
// remove 버튼 클릭했을 때
// 박스 앞 / 뒤, 전 / 후 상관 없이 모든 img 태그 자체가 사라짐.
$('#remove').on('click', function() {
$('img').remove();
// $('#box').remove(); // <div id="box"> 포함해서 box 안에 있는 모든 것들이 사라짐.
});
$('#initiate').on('click', function() {
// img 태그 제거
$('img').remove();
// div내부 요소 비우고 추가
$('#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>
<p>
<div id="box">
div 내부 <img src='image/apple.png'>
</div>
</body>728x90
'FE > jQuery' 카테고리의 다른 글
| jQuery - DOM 요소 클래스 속성(CSS 동적 적용) (0) | 2021.12.15 |
|---|---|
| jQuery - DOM 요소의 추가 및 삭제 (0) | 2021.12.15 |
| jQuery - each() 메소드 (0) | 2021.12.15 |
| jQuery - 이벤트 (0) | 2021.12.14 |
| jQuery - 변수 (0) | 2021.12.14 |
Comments