내용 제어

  • 문서 객체에 내용 추가 : html( ), text( )
$(function(){
	// html : HTML 태그 허용
	$('div').html('<h1>날씨가 흐린 오전!</h1>');

	// text : HTML 태그 비허용
	$('p').text('<h1>놀이공원의 곰인형</h1>');
});
<body>
	<div></div>
	<p></p>
</body>

 

  • 문서 객체에 서로 다른 내용 추가 : html( )
$(document).ready(function(){
		// 매개변수로 전달된 함수를 이용해서 문서 객체에 서로 다른 데이터 표시
		$('div').html(function(index) {
			return '<h2>Header - ' + index + '</h2>';
		});

		$('h1').html(function(index,html) {
			// index : 배열의 인덱스
			// html : 태그의 내용
			return '**' + html + '**';
		});
	});
<body>
	<div></div>
	<div></div>
	<div></div>
	<h1>H - 0</h1>
	<h1>H - 1</h1>
	<h1>H - 2</h1>
</body>

 

 

문서 객체 삭제

  • 문서 객체 삭제 : empty( ), remove( )
$(document).ready(function() {
	// empty() : 특정 문서 객체의 후손을 모두 제거
	$('div').empty();

	// remove() : 특정 문서 객체를 제거
	$('p').remove();
});
<body>
	<div>
		<h1>Header-0</h1>
		<h1>Header-1</h1>
	</div>
	<p>
		<span>Content-0</span>
		<span>Content-1</span>
	</p>
</body>

 

 

문서 객체 추가

  1. $(A).appendTo(B) : A를 B의 기존 자식의 뒤에 추가
  2. $(A).prependTo(B) : A를 B의 기존 자식의 앞에 추가
  3. $(A).insertAfter(B) : A를 B의 뒤에 형제로 추가
  4. $(A).insertBefore(B) : A를 B의 앞에 형제로 추가
  5. $(A).append(B) : B를 A의 기존 자식의 뒤에 추가
  6. $(A).prepend(B) : B를 A의 기존 자식의 앞에 추가
  7. $(A).after(B) : B를 A의 뒤에 형제로 추가
  8. $(A).before(B) : B를 A의 앞에 형제로 추가

 

  • $(A).appendTo(B) : A를 B의 기존 자식의 뒤에 추가
$(document).ready(function() {
	// 문서 객체 생성
	$('<h1>Hello World!</h1>').appendTo('div');   // 기존 자식의 뒤에 추가
});
<body>
	<div>
		<h1>안녕하세요!</h1>
	</div>
</body>

 

  • $(A).prependTo(B) : A를 B의 기존 자식의 앞에 추가
$(document).ready(function() {
	// 문서 객체 생성
	$('<h1>Hello World!</h1>').prependTo('div');   // 기존 자식의 앞에 추가
});

 

  • $(A).insertAfter(B) : A를 B의 뒤에 형제로 추가
$(document).ready(function() {
	// 문서 객체 생성
	$('<h1>Hello World!</h1>').insertAfter('div');   // div 뒤에 형제로 추가
});

 

 

  • $(A).insertBefore(B) : A를 B의 앞에 형제로 추가
$(document).ready(function() {
	// 문서 객체 생성
	$('<h1>Hello World!</h1>').insertBefore('div');   // div 앞에 형제로 추가
});

 

  • appendTo( ) 메서드를 활용한 사진 넘기기 효과
$(document).ready(function() {
	// 이미지 사이즈 조정
	$('img').css({width:250,height:250});
	// 함수를 2초마다 실행
	setInterval(function() {
		// 가장 앞에 위치한 img에 태그를 탐색해서 img 태그들의 가장 뒤에 추가
		$('img').first().appendTo('body');
	},2000);
});
<body>
	<img src="../images/Koala.jpg">
	<img src="../images/Penguins.jpg">
	<img src="../images/landscape.jpg">
	<img src="../images/S_2.jpg">
	<img src="../images/S_3.jpg">
</body>

 

  • $(A).append(B) : B를 A의 기존 자식의 뒤에 추가
$(document).ready(function(){
	// 기존에 존재하는 태그		문서객체 생성
	$('div').append('<h1>Hello jQuery!</h1>');
});

 

  • $(A).prepend(B) : B를 A의 기존 자식의 앞에 추가
$(document).ready(function() {
	$('div').prepend('<h1>Hello jQuery!</h1>');
});

 

  • $(A).after(B) : B를 A의 뒤에 형제로 추가
$(document).ready(function() {
	$('div').after('<h1>Hello jQuery!</h1>');
});

 

  • $(A).before(B) : B를 A의 앞에 형제로 추가
$(document).ready(function() {
	$('div').before('<h1>Hello jQuery!</h1>');
});

 

  • append( ) 메서드를 활용하여 배열 데이터를 문서 객체로 추가
$(document).ready(function() {
		var content = [
			{name:'홍길동',city:'서울'},
			{name:'박문수',city:'부산'},
			{name:'장영실',city:'광주'}
		];
		
		var output = '';
		$.each(content,function(index,item) {
			output += '<div>';
			output += '<h1>' + item.name + '</h1>';
			output += '<h1>' + item.city + '</h1>';
			output += '</div>';
		});
		
		$('#output').append(output);
	});
<body>
	<div id="output"></div>
</body>

 

'Web > jQuery' 카테고리의 다른 글

[jQuery UI] 제이쿼리 UI 연결, 메서드  (0) 2021.08.09
[jQuery] 애니메이션 효과  (0) 2021.08.09
[jQuery] 이벤트 처리  (0) 2021.08.09
[jQuery] 배열 처리, 속성 제어  (0) 2021.08.09
[jQuery] 제이쿼리 연결, 선택자  (0) 2021.08.09

티스토리툴바