jQuery - DOM 요소 조작

jQuery - DOM 요소 조작

jQuery DOM 요소 조작

동적으로 쉽고 간단하게 DOM 요소 조작 가능

DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성

DOM 요소 조작 관련 메소드 text() : 글자와 관련된 내용을 반환하거나 설정 html() : HTML과 관련된 내용을 반환하거나 설정 $(선택자).append(A) : 선택자의 내부 요소들 맨 뒤에 A를 삽입 $(선택자).prepend(A) : 선택자의 내부 요소들 맨 앞에 A를 삽입 $(A).apeentTo(선택자) : A를 선택자의 내부 요소들 맨 뒤에 삽입 $(A).prependTo(선택자) : A를 선택자의 내부 요소들 맨 앞에 삽입 $(선택자).after(A) : 선택자 뒤에 A 삽입 $(선택자).before(A) : 선택자 앞에 A 삽입 $(A).insertAfter(선택자) : A를 선택자의 뒤에 삽입 $(A).insertBefore(선택자) : A를 선택자의 앞에 삽입 $(선택자).remove() : 해당되는 요소 제거 $(선택자).empty() : 해당되는 요소의 모든 자식 노드 제거

text()와 html() 메소드

자바스크립트의 innerHTML 속성과 유사

찾은 DOM 요소의 글자(텍스트)를 설정하거나 반환

html() : HTML 태그 인식 (태그 효과 적용)

text() : HTML 태그 인식하지 못하고 글자로 인식 ( 그대로 출력)

text()와 html() 예제 - DOMtextHtml.html

$(document).ready(function() { // 1. text() : 문자열만 반환(태그 제외) var aText = $('#a').text(); // 괄호안에 인자 없으면 get()의 의미 // 변수 aText는 텍스트 값을 저장한 변수 : 객체의 역할로 메소드 사용 불가 alert("text : " + aText); // text : A // 2. html() : 태그 포함된 문자열 반환 var bHtml = $('#b').html();// 괄호안에 인자 없으면 get()의 의미 alert("html : " + bHtml); // html :

B

jQuery

을 태그로 인식하지 못하고 문자열로 취급하여 출력됨 // aText.text('

jQuery

jQuery

을 태그로 인식하여 제목이 됨. $('#b').html('

jQuery

append()/prepend() 예제 - DOMappend.html

#box { width:500px; height: 200px; line-height:200px; border:1px solid #000; } img {vertical-align:middle;} $(document).ready(function() { var img = ""; // prepend 버튼 클릭했을 때 // 선택자 box 내부 요소들 맨 앞에 img 삽입. // div 내부 $('#prepend').on('click', function() { $('#box').prepend(img); }); // append 버튼 클릭했을 때 // 선택자 box 내부 요소들 맨 뒤에 img 삽입. // div 내부 $('#append').on('click', function() { $('#box').append(img); }); // before 버튼 클릭했을 때 // 선택자 box 요소 앞에 img 삽입.(

영역 외부에 추가) // //

// div 내부 //

$('#before').on('click', function() { $('#box').before(img); }); // after 버튼 클릭했을 때 // 선택자 box 요소 뒤에 img 삽입.(

영역 외부에 추가) //

// div 내부 //

// $('#after').on('click', function() { $('#box').after(img); }); // empty 버튼 클릭했을 때 //

태그 안에 들어있는 모든 요소 제거 $('#empty').on('click', function() { $('#box').empty(); }); // remove 버튼 클릭했을 때 // 박스 앞 / 뒤, 전 / 후 상관 없이 모든 img 태그 자체가 사라짐. $('#remove').on('click', function() { $('img').remove(); // $('#box').remove(); //

포함해서 box 안에 있는 모든 것들이 사라짐. }); $('#initiate').on('click', function() { // img 태그 제거 $('img').remove(); // div내부 요소 비우고 추가 $('#box').empty().append("div 내부 "); }); }); prepend append before after empty remove 초기화 div 내부

from http://5bong2-develop.tistory.com/115 by ccl(A) rewrite - 2021-12-15 11:01:21

Top