Jquery[제이쿼리] wrapInner() 메서드배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] wrapInner() 메서드를 배워보겠습니다.

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

실행화면입니다.

=============================== 
$('.b1').on('click',function(){
   $('p').wrapInner('<b></b>');
   alert($('.div0').html());
  });
=============================== 
class b1가 click되면 <== wrapInner(wrappingElement)버튼입니다.
<p>태그 대상으로 wrapInner()메서드를 실행합니다.
그뒤에 alert()메서드로 추가된 소스를 확인하기위하여 값을 찍도록하였습니다.

※wrapInner()란 선택한 대상안에 지정한 태그로 감싸주는 메서드입니다.
형식은 wrapInner(wrappingElement) / wrapInner(function)로 구성되어있습니다.
wrappingElement 에는 감쌀 요소를 적어주시면된답니다.
function 에는 기능을 적어주시면된답니다.

이해가 안되는 분들은 ↓↓↓↓↓↓
http://api.jquery.com/wrapInner/

실행한뒤 wrapInner(wrappingElement)버튼을 클릭한 모습입니다.
<p>태그안에 <b>태그가 추가된모습입니다.

=============================== 
$('.b2').on('click',function(){
   var a=["<em></em>","<span></span>","<b></b>"];
   $('p').wrapInner(function(i){
    return a[i];
   });
   alert($('.div0').html());
  });
=============================== 
class b2가 click되면 <== wrapInner(function)버튼입니다.
<p>태그 대상으로 wrapInner()메서드를 실행합니다.
function로 <p>태그만큼 반복을하여 변수a에 있는값으로 넣어주었습니다.

wrapInner(function)버튼을 클릭한 모습입니다.
<p>태그안에 변수a에 있는값으로 추가된모습입니다.

wrapInner(wrappingElement)버튼을 한번더 클릭한뒤의 모습입니다.

오늘은 제이쿼리[jquery] wrapInner() 메서드를 배워보았습니다.
그럼 다음에 또만나요~