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

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

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

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

실행화면입니다.

=============================== 
$('.b1').on('click',function(){
   var text_t1 = $('.t1').val();
   $('span').add(text_t1).css("color","blue");
   setTimeout(function(){
    $('span').add(text_t1).css("color","black");
   }, 1000);
  });
=============================== 
class b1가 click되면 <== 셀렉터 추가버튼입니다.
변수 text_t1에다가 class  t1의 value값을 저장합니다.<== 추가 문구뒤에있는 텍스트박스의 값입니다.
<span>태그의 대상으로 add()메서드를 실행한뒤 css를 변경하도록하였습니다.
그뒤 setTimeout()메서드를 사용하여 css를 다시변경하도록하였습니다.

※add()란 대상을 더선택하거나 태그를 추가할때사용하는 메서드입니다.

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

셀렉터추가 버튼을 눌럿을때의 실행결과입니다.
추가뒤에있는 텍스트박스의 값이없기때문에 <span>태그만 css가변경된모습입니다.

텍스트박스에 b를 적고 셀렉터추가 버튼을 눌럿을때의 실행결과입니다.
<span>에 <b>가 추가되었습니다.  

이번에는 * 값을 넣었습니다.

=============================== 
$('.b2').on('click',function(){
   $('.div0').add('<textarea rows="10" cols="10"></textarea>').appendTo($('.div0'));
  });
=============================== 
class b2가 click되면 <== 태그추가 버튼입니다.
 <textarea>태그를 추가하도록 하였습니다.
appendTo()메서드는 배웠기때문에 설명을 생략하겠습니다.

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

태그추가 버튼을 클릭한뒤의 실행결과입니다.
버튼을 누를때마다 <textarea>태그가 추가된답니다. 

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