yongyong-e
[jQuery] 문서 객체 다루기 - 3 본문
0) 개요
jQuery에서 문서 객체를 삽입 및 이동하는 방법
1) 문서 객체 삽입
방법 1.이 메서드 체이닝을 사용하기 더 쉽다고 생각하기에 방법 2. 보다 방법 1.을 선호
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello</h1>
<script>
// 방법 1.
$("<h1></h1>").html("Hello Append").appendTo("body")
$("<h1></h1>").html("Hello Prepend").prependTo("body")
$("<h1></h1>").html("Hello After").insertAfter("body")
$("<h1></h1>").html("Hello Before").insertBefore("body")
// 방법 2.
// $("body").append("<h1></h1>")
// $("body").prepend("<h1></h1>")
// $("body").after("<h1></h1>")
// $("body").before("<h1></h1>")
</script>
</body>
</html>결과
또한 페이지 검사를 통해 코드 내부를 보게 되면 아래 처럼 태그들이 적용된 것을 확인할 수 있습니다.
2) 문서 객체 이동
<!DOCTYPE html>
<html>
<head>
<title>jQuery 문서 객체 다루기 - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<script>
$("h1").appendTo("body")
</script>
</body>
</html>h1 태그 이동 전
h1 태그 이동 후
또한 페이지 검사를 통해 코드 내부를 보게 되면 아래 처럼 h1 태그가 이동된 것을 확인할 수 있습니다.
'웹 프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 이벤트 연결하기 (0) | 2019.09.05 |
|---|---|
| [jQuery] 문서 객체 다루기 - 2 (0) | 2019.09.04 |
| [jQuery] 문서 객체 다루기 - 1 (0) | 2019.09.04 |
| [jQuery] 문서 객체 생성 방법 (0) | 2019.09.04 |
| [jQuery] 라이브러리 사용 설정 (0) | 2019.09.04 |
'웹 프로그래밍/jQuery' Related Articles
more
Comments