<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서객체 생성</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
/*
메서드 이름 설명
$(A).appendTo(B) A를 B의 기존 자식의 뒤에 추가
$(A).prependTo(B) A를 B의 기존 자식의 앞에 추가
$(A).insertAfter(B) A를 B의 뒤에 형제로 추가
$(A).insertBefore(B) A를 B의 앞에 형제로 추가
*/
$(function(){
//문서 객체 생성
//$('<h1>Hello World</h1>').appendTo('div');
//$('<h1>Hello World</h1>').prependTo('div');
//$('<h1>Hello World</h1>').insertAfter('div');
$('<h1>Hello World</h1>').insertBefore('div');
});
</script>
</head>
<body>
<div>
<h1>안녕하세요</h1>
</div>
</body>
</html>
$(A).appendTo(B):A를 B의 기존 자식의 뒤에 추가
$(A).prependTo(B):A를 B의 기존 자식의 앞에 추가
$(A).insertAfter(B):A를 B의 뒤에 형제로 추가$(A).insertBefore(B):A를 B의 앞에 형제로 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 생성</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('img').css('width',250);
//2초마다 매개변수로 전달되는 함수를 실행
setInterval(function(){
//첫 번째 이미지를 마지막으로 보냄
$('img').first().appendTo('body');
},2000);
});
</script>
</head>
<body>
<img src="../files/Chrysanthemum.jpg">
<img src="../files/Desert.jpg">
<img src="../files/Hydrangeas.jpg">
<img src="../files/Jellyfish.jpg">
<img src="../files/Koala.jpg">
</body>
</html>
s26_appendTo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 생성 및 추가</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
/*
메서드 이름 설명
$(A).append(B) B를 A의 기존 자식의 뒤에 추가
$(A).prepend(B) B를 A의 기존 자식의 앞에 추가
$(A).after(B) B를 A의 뒤에 형제로 추가
$(A).before(B) B를 A의 앞에 형제로 추가
*/
$(function(){
//$('div').append('<h1>Hello jQuery</h1>');
//$('div').prepend('<h1>Hello jQuery</h1>');
//$('div').after('<h1>Hello jQuery</h1>');
$('div').before('<h1>Hello jQuery</h1>');
});
</script>
</head>
<body>
<div>
<h1>여기는 겨울</h1>
</div>
</body>
</html>
$(A).append(B) B를 A의 기존 자식의 뒤에 추가
$(A).prepend(B) B를 A의 기존 자식의 앞에 추가$(A).after(B) B를 A의 뒤에 형제로 추가$(A).before(B) B를 A의 앞에 형제로 추가
