문서객체 조작
문서객체 조작
- 조작 관련 메서드
- 요소의 내용을 조작하는 메서드
- 요소를 추가하는 메서드
- 요소를 래핑하거나 바꿔치기하는 메서드
- 요소를 제거하거나 복사하는 메서드
1. 요소의 내용을 조작하는 메서드
- text()
- 해당 개체가 가지고있는 컨텐츠를 html 요소를 포함하지 않는 텍스트로 반환
- 여러 개체를 선택할 경우, 모든 대상의 텍스트를 결합해 반환
- html()
- 개체가 포함하고 있는 html 컨텐츠를 반환
- 여러 개체를 선택할 경우, 첫 번째 요소의 html만을 반환
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
console.log("html() 결과=>" + $("#sp1").html());
console.log("text()결과=>" + $("#sp1").text());
console.log("span html() 결과=>" + $("span").html());
console.log("span text()결과=>" + $("span").text());
$("#sp1").html("<u>html로 값 넣기</u>");
$("span:eq(1)").text("<u>text로 값 넣기2</u>");
});
</script>
</head>
<body>
<span id="sp1"><b>test중</b></span><br>
<span><b>span 태그입니다</b></span><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('div').html(function (index) {
return '<p>문단-' + index + '</p>';
});
$('h2').html(function (index, html) {
return '[' + html + ']'; //두번째 매개변수에 원래 있던 html의 내용이 들어감
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<h2>제목1</h2>
<h2>제목2</h2>
<h2>제목3</h2>
</body>
</html>
2. 요소를 추가하는 메서드
- append() : 내부 뒤쪽
- prepend() : 내부 앞쪽
- after() : 외부 뒤쪽
- brfoer() : 외부 앞쪽
- $(‘<p>요소</p>’)
before <p> prepend 요소 append </p> after
- $(html태그)
- 문서 객체를 생성
- $(‘선택자’)
- 문서 객체를 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('<h1></h1>').html('안녕').appendTo('#div1');
$('<h1>hello</h1>').appendTo('#div2');
$('<img>').attr('src', '../images/dog.jpg').appendTo('#div3');
$('<img>', {
src: '../images/snow.jpg',
width: 100,
border:1 }).appendTo('#div4');
});
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<hr>
<div id="div3">
</div>
<div id="div4">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
var h1 = '<h1>제목1</h1>';
var h2 = '<h2>제목2</h2>';
$('#p1').append(h1);
$('#p2').append(h1, h2);
var arr = [
{ name: '홍길동', id: 'hong' },
{ name: '김길동', id: 'kim' },
{ name: '이길동', id: 'lee' }];
$('div').append(function (index) {
var item = arr[index];
var str = item.name + '- <b>' + item.id + '</b>';
return str;
});
});//ready
$("div").each(function(idx, item) {
var obj = arr[idx];
$(this).append(obj.name + " - <b>" + obj.id + "</b>");
});
</script>
</head>
<body>
<p id="p1">p 태그입니다1.</p>
<p id="p2">p 태그입니다2.</p>
<div></div> <div></div> <div></div>
</body>
</html>
3. 요소를 제거하거나 복사하는 메서드
- clone()
- 요소 자체만 복사
- clone(true)
- 요소에 달려있는 이벤트 처리기(click 등) 도 복사
remove / empty
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('h2').first().remove();
$('#div1').empty();
});
</script>
</head>
<body>
<div>
<h2>제목1</h2>
<h2>제목2</h2>
</div>
<div id="div1">
<h3>제목3</h3>
<h3>제목4</h3>
</div>
</body>
</html>
clone
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
* { font-size:12px; font-family:돋움; }
.annotation { background: pink; }
b{color:green}
</style>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('annotation').each(function(idx,item){
$(this).after("<sup>"+(idx+1)+"</sup>");
});
$('button').click(function(){
alert($(this).text());
$(this).remove();
});
var $prev = $("#prevBtn").clone();
var $next = $("#nextBtn").clone(true);
$("div#bottomDiv").prepend($prev);
$("div#bottomDiv").append($next);
});
</script>
</head>
<body>
<button id="prevBtn">이전 페이지로</button>
<button id="nextBtn">다음 페이지로</button>
<h3>jQuery란?</h3>
<div>
<b>jQuery</b>는 가볍고 빠르며, 간결한 <span class="annotation">오픈소스</span>
스크립트 라이브러리입니다. 이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들 즉,
HTML 문서 <span class="annotation">트래버스</span>, 이벤트 처리, 애니메이션,
<span class="annotation">Ajax</span>
상호 작용 등을 지원하여 빠르고 견고하게 리치 웹 애플리케이션 개발을 할 수 있도록 지원합니다.
</div>
<br />
<div id="bottomDiv"></div>
<hr />
div태그 : <div id="div1"><b>empty 연습</b></div>
</body>
</html>
