jQuery/DOM&jQuery

jQuery DOM트리 append, appendTo 메소드

샷타이거 2009. 11. 10. 14:55

jQuery append() 메소드

먼저 DOM이뭔지 다시 잠깐보자

"객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.DOM은 HTML 문서의 요소(엘레멘트; element)를 제어하기 위해 웹 브라우저에서 처음 지원됐다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다."

jQuery 또한 이런 접근을 통해 모델을 구현한다.엘리먼트안에 새 엘리먼트를 만들거나.엘리먼트를 감싸거나, 엘리먼트 앞뒤에 추가하는 메소드를 지원한다. 그중 append()메소드가 엘리먼트안에 자식엘리먼트를 추가하는 방법이다.

append() 메소드

.append() 메소드는 선택한 엘리먼트안에 자식 엘리먼트,텍스트를 추가한다.

사용방법은 $('선택').append('내용');

예를보자

본문


$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  $('가늘게').appendTo('p');
  });

굵게 하도록하고 하위엘리먼트를 넣어보자<strong>굵게</strong>

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  });

appendTo메소드를 보자 이것은 앞뒤가바뀌었다고 보면된다.

appendTo() 메소드

영어에서 as well as와 not~ but~ 를보자.Not only A but also B = B as well as A .대상 A,B가 바귀었다..appendTo()메소드 역시마찬가지다.$('A').append('B') = $('B'),appendTo('A')와 같다 다음예제를 보자

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  $('가늘게').appendTo('p');
  });

최종결과는 다음과 같이 나올것이다.

본문노말굵게가늘게

적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html

웹표준관련 주의사항

DOM트리를 짤는 메소드 사용시 appendsk기타등 변수값에 우리는 태그엘리먼트를 입력하게된다.예제에서 $('<i>가늘게</i>').appendTo('p');처럼 </i>를 넣는경우. 이런경우 자바스크립트 삽입시 html페이지에 그대로 넣을경우 코딩유효성 검사시 경고가뜬다. 따라서 이같이 태그 엘리먼트를 사용할시에는 별도로 파일이름을 정해주고 링크시키는방법이옳다.

또하나더 유의사항을 인코딩 방법이다. 인코딩방법에 따라 글자가 개지니 js파일이 무슨 종류의 인코딩인지 알아야한다. html과 일치하지않는경우 깨진다.

저작자표시