다루두루

블로그 이미지

차케요

공부하면서 정리하는 노트같은 블로그입니다.

JQuery append prepend

HTML 공부 2015. 3. 12. 11:31

JQuery append prepend


지난 글에서 JQuery의 text(), html() 메서드를 이용해서 내용을 읽어오고, 수정하는 방법에 대해서 알아봤었는데요. html이나 text 메서드는 내용 변경하려면 먼저 기존의 것을 읽어와서 추가하는 형식이었는데요. JQuery에서는 앞. 뒤로 새로운 내용을 추가하는 메서드도 제공하고 있습니다. append와 prepend 메서드가 그것들인데요. 형식은 다음과 같습니다. 


$("선택자").append("뒤쪽에....");

$("선택자").prepend("앞쪽에....");


prepend는 뒤쪽에, prepend는 앞에 추가하는 기능입니다. 이때 내용뿐만 아니라 태그도 사용 가능한 형태로 삽입 됩니다. 예제를 만들어서 확인해볼게요. 

 

 


본문에 텍스트 한 줄을 입력한 상태이구요. append와 prepend 메서드를 이용해서 이 문장의 앞뒤로 새로운 내용을 추가해보겠습니다. 


먼저 뒤쪽에 문자열을 삽입했습니다. 


이렇게 뒤쪽에 추가됩니다. 


다음은 앞쪽에 <a> 태그를 넣어보겠습니다.

prepend() 메서드를 이용해 추가하고 있으며, <a>태그를 이용해서 링크를 삽입하고 있습니다. 


태그가 적용된 상태로 앞쪽에 삽입되는 걸 확인할 수 있습니다. 


이렇게 해서 기존 내용의 앞. 뒤로 새로운 내용을 추가하는 메서드인 append와 prepend 메서드에 대해서 알아봤습니다. 수고하셨어요.

저작자표시 비영리 변경금지 (새창열림)
Posted by 차케요

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

카테고리

NEW (900)
아이폰 개발 기초 (7)
취미 (16)
아두이노 (16)
[안드로이드] 어플만들기 (77)
안드로이드 기초 다지기 (61)
슈팅게임 만들기 (4)
[JAVA]자바 공부하기 (48)
C언어 알고리즘 (61)
[Unity3D]유니티3D 강좌 (7)
컴퓨터 (325)
포토샵CS2 강좌 (6)
유용한 프로그램 (244)
리눅스 노트정리 (22)
임베디드 리눅스 (11)
New블로그 (9)
음식의 효능 (4)
일반상식 (56)
HTML 공부 (40)
포토샵 공부 (36)
엑셀 (6)
파워포인트 공부 (19)
노트정리 (38)
일상 (33)
TV영화 (85)
방명록 : 관리자 : 글쓰기
차케요's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

다루두루

공부하면서 정리하는 노트같은 블로그입니다.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • NEW (900)
    • 아이폰 개발 기초 (7)
    • 취미 (16)
      • 아두이노 (16)
    • [안드로이드] 어플만들기 (77)
      • 안드로이드 기초 다지기 (61)
      • 슈팅게임 만들기 (4)
    • [JAVA]자바 공부하기 (48)
    • C언어 알고리즘 (61)
    • [Unity3D]유니티3D 강좌 (7)
    • 컴퓨터 (325)
      • 포토샵CS2 강좌 (6)
      • 유용한 프로그램 (244)
    • 리눅스 노트정리 (22)
      • 임베디드 리눅스 (11)
    • New블로그 (9)
    • 음식의 효능 (4)
    • 일반상식 (56)
    • HTML 공부 (40)
    • 포토샵 공부 (36)
    • 엑셀 (6)
    • 파워포인트 공부 (19)
    • 노트정리 (38)
    • 일상 (33)
    • TV영화 (85)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바