Jquery[제이쿼리] before,after,prepend,append 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] before,after,prepend,append메서드를 배워보겠습니다.
비슷비슷해보이지만 차이가있으니 유심히 보세요~

이렇게 준비해 보았습니다.

실행하면 이렇게 나오면 된답니다.

===============================
$('input').on('click',function(){
var a =$(this).val();
var str = new String(a);
===============================

<input>태그가 click되면 해당하는 value의 값을 a라는 변수에 담아라입니다.
str라는 변수에 a변수에 담아져있는 값을 new String(a);<== 이렇게 
문자열로 바꿔주어서 담아라는 뜻입니다.

===============================
if(str == "before")
   {
    $('h1').before(str);
   }
===============================
if를 사용하여 문자열로 바뀐 value의 값을 "before"랑 같은지를 비교를합니다.
비교를 해서 참일경우 <h1>태그의 대상으로 before()메서드를 이용하여
str값 즉 참일경우니 before라고 찍어라는 뜻입니다.
아래부분은 반복이니 설명은 생략하겠습니다.

※before란 선택된 요소 전에 콘텐츠를 추가해주는 메서드입니다.
예) >>이부분<<   <h1>기준점입니다.</h1>

※after란 선택된 요소 다음에 콘텐츠를 추가해주는 메서드입니다.
예) <h1>기준점입니다.</h1> >>이부분<< 

※prepend란 선택된 요소의 여는 태그다음에 콘텐츠를 추가해주는 메서드입니다.
예) <h1> >>이부분<<  기준점입니다.</h1>

※append란 선택된 요소의 닫는 태그전에 콘텐츠를 추가해주는 메서드입니다.
예) <h1>기준점입니다.  >>이부분<<  </h1>

버튼을 누르기전 입니다. 그럼 버튼을 눌러볼까요?

before버튼을 누르니 기준점입니다. 위에 나온화면입니다.!

after버튼을 누르니 기준점입니다. 다음에 나온화면입니다.!

prepend버튼을 누르니 기준점입니다. 글의 <h1>태그 다음부분에 추가되어 나온 화면입니다.!

append버튼을 누르니 기준점입니다. 글의 </h1>태그 전부분에 추가되어 나온 화면입니다.!
차이점을 잘 이해하시면 도움이 될듯해요!^ㅡ^/

오늘은 제이쿼리[jquery] before,after,prepend,append메서드를 배워보았습니다.
그럼 다음에 또만나요~