|
|
앞서 기술했듯이 DOM은 동적인 웹 페이지를 제작하는 것을 목적으로 개발하였습니다.
이를 위하여 HTML 페이지와 XML 페이지 처리를 위한 DOM API를 제공하고 있습니다.
DOM은 요소(ELEMENT)의 추가,변경, 삭제를 통해 HTML 페이지 구조를 제어할 수 있음.
|
|
|
메소드 |
기능 |
Html( ) |
선택된 요소의 html 내용을 가져옴= .InnerHtml |
Text( ) |
선택요소의 html태그 제외한 내용을 표시 |
Val( ) |
Input태그의 value속성 값을 표시 |
Append(값) |
선택요소 내용 뒤에 값을 추가 |
appendTo(선택자) |
선택요소를 선택자로 선택된 요소의 내용 뒤에 추가 |
Prepend(값) |
선택요소 내용 앞에 값을 추가 |
prependTo(선택자) |
선택요소를 선택자로 선택된 요소의 내용 앞에 추가 |
After(값) |
선택요소 뒤에 값을 표시 |
Before(값) |
선택요소 앞에 값을 표시선택요소를 제거 |
Remove() |
선택요소를 제거 |
예제)
5lesson1.zip<html>
<head>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function()//현재 문서가 준비되면 함수를 사용하겠다.
{
var a=$("#test").html();
var b=$("#test").text();
$("p").append("이것은 뒤에 붙는 append메소드구요 이뒤에 html메소드가 실행됩니다.");
alert("html 메소드 결과입니다."+a);
$("span").prepend("이것은 뒤에 붙는 preppend메소드구요");
alert("text()의 결과입니다."+b);
$("#test>ul").remove();
});
</script>
</head>
<body>
<div id="test">
jQuery를 열심히 공부하는 중입니다.<br>
<p>append의 결과 입니다.</p>
<span>preppend의 결과 입니다.</span>
<ul>
<li>1
<li>2
<li>3
</ul>
</div>
</body>
</html>
'웹프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery-탐색관련 메소드 (0) | 2016.03.28 |
|---|---|
| jQuery의 변수 (0) | 2016.03.28 |
| jQuery의 메소드 (0) | 2016.03.26 |
| jQuery-선택자1 (0) | 2016.03.24 |
| jQuery의 개념 및 기초예제 (0) | 2016.03.24 |