12/21 69-3 [ jQuery] Append/Clone/Wrap/RemoveEmpty

[Append계열]

DOM객체를 동적으로 추가시키는 함수들워.... 어지러움 폼

<fieldset>
    <legend>DOM객체를 동적으로 추가하는 함수들</legend>
    <h2>
        <span>제목입니다</span>
    </h2>
    <input type="text" id="row" />행 <input type="text" id="col" />열
    <input type="button" value="테이블 동적 생성" />
    <table style="border-spacing: 1px; background-color: red">
        <tr style="background-color: white">
            <td>1행 1열</td>
            <td>1행 2열</td>
        </tr>
        <tr style="background-color: white">
            <td>2행 1열</td>
            <td>2행 2열</td>
        </tr>
    </table>	

    <div id="lblDisplay" style="border: 1px red solid; width: 600px">
        대상<br />대상2
    </div>	
</fieldset>

이건 직접  하나씩 해봐야지 알 수 있어서 코드만 우선 적어놓고..

$(function(){
        $(':button').click(function(){
            var table="<table style=\"border-spacing: 1px; background-color: red\">";
            var row=$('#row').val();
            var col=$('#col').val();
            for(var i=1; i<=row;i++){
                table+="<tr style='background-color:white'>";
                    for(var k=1 ;k<=col;k++){
                    table+="<td>"+i+"행"+k+"열</td>";
                    }
                    table+="</tr>";
            }
            table+="</table>"  ;
            
            append계열 함수 미사용
            $('#lblDisplay').html($('#lblDisplay')+table);  //대상 뒤로
            $('#lblDisplay').html(table+$('#lblDisplay'));  //대상 앞으로
            
            추가할 대상의 컨텐츠 이후에 추가됨
            $('선택자').append('추가 할 요소')
            $('선택자').append($()함수를 기존 객체 선택)
            $('#lblDisplay').append(table);
            $('#lblDisplay').append($('table:first')); //기존요소 appand 하면 잘라내서 붙여넣기함

            $('추가 할 요소').appendTo('선택자')
            $(table).appendTo('#lblDisplay'); //appand랑 똑같음
            $('table:first').appendTo('#lblDisplay');
            
                befor() : -DOM요소 이전에 html요소 추가
                			$('선택자').before('html요소');      
                after() : -DOM요소 다음에 html요소 추가
                			$('선택자').after('html요소');

                insertAfter():위랑 같은데 인자순서만 달라짐
               			 $('html요소').insertBefore('선택자');		
                insertBefor():얘도
               			 $('html요소').insertBefore('선택자');
            
          $('#lblDisplay').before(table);
          $('#lblDisplay').before($('table:first')); // 잘라내서 붙여넣기함
          $('#lblDisplay').after(table);
          $('#lblDisplay').after($('table:first')); 
        });
    });

---

[Clone]

말그대로 복제하는 함수

여기서 핵심은

원본을 그대로 유지하느냐 마느냐!!!

 

폼

<fieldset>
    <legend>clone()</legend>

    <div class="clone">원본</div>
    <div class="clone" >대상</div>

    <hr/>
    <button>문제 추가</button>
    <hr />
    <div>
        <span>문제1번</span>
        <input type="text" name="problem1" style="width: 60%" />
    </div>

</fieldset>

이거 팀프로젝트에도 적용 할 수 있을 것 같은데은근히 동적으로 뭘 추가해야 할 게 많다..문제는 추가는 하는데 그걸 저장하는게...아무튼 이렇게 하는거 익혀두자 !!!

$(function(){
       $('.clone').eq(0).click(function(){
        원본을  잘라내서 붙여넣기 효과
        var origin=$(this).css('backgroundColor','yellow').html('복제');
        $('.clone:eq(1)').after(origin);
        
        원본 복제(clone함수)후 복제본을 변경 한 후 after()함수 적용: 원본은 그대로 유지 됨
        var clone=$(this).clone().css('backgroundColor','yellow').html('복제');
        $('.clone:eq(1)').after(clone);
       });

       설문지 문항 동적으로 추가하기
       var index=1;
       var problem= $('div:last');
       $(':button').click(function(){
             클론함수 미사용
            $('div:last').after("<div><span>문제"+ ++index+"번</span><input type=\"text\" name=\"problem"+index+"\" style=\"width: 60%\" /></div>");
             클론함수 사용
            $('div:last').after(problem.clone().find('span').html('문제'+ ++index+'번').next().prop('name','problem'+index).parent());
        });
    });

---

[Wrap]

태그로 감싸기

 

 

<fieldset>
    <legend><span>wrap()함수</span></legend>
    <h2><span>포탈 사이트</span></h2>
    <ul>		 
      <a href="http://www.naver.com/">네이버</a>
      <a href="http://www.daum.net/">다음</a>
      <a href="http://www.nate.com/">네이트</a>
    </ul>
      <hr/>
      <button>span태그 감싸기</button>
      <button>a태그 감싸기</button>	     
</fieldset>

<script>
    $(function(){
        $('button').eq(0).on('click',function(){
            $('span:first').wrap('<strike>').wrap('<strong>');
        });
        $('button:last').click(function(){
            $('a').wrap('<li>');
        })
    });
</script>

바뀜!

---

[RemoveEmpty]

  $("선택자") 하면 해당 객체가 없어도 무조건 jQuery객체 반환.
 null이나 undefined가 아님
 따라서 해당 객체 존재 유무는 null이 아닌
 $("선택자").length==0으로 판단해야 한다!!

 

폼

<fieldset>
    <legend>remove()및 empty()함수</legend>
    <button>REMOVE</button>
    <button>EMPTY</button>
    <div style="color:green;border:1px red solid">DIV</div>
</fieldset>

 

$(function(){
    console.log($('h2')===null ? 'H2요소가 없다' :'H2요소가 있다' );   //H2요소가 있다  에라이
    console.log($('h2')===undefined ? 'H2요소가 없다' :'H2요소가 있다' );  //H2요소가 있다 에에에라이
    console.log($('h2').length ===0 ? 'H2요소가 없다' :'H2요소가 있다' );  //H2요소가 없다 그러취!

    $(':button').click(function(){
        console.log($(this).is(':first'));  //false
        console.log($(this).is('button:first'));// 꼭 button 적어줘야 나온다 ! 아하!
       if($(this).is('button:first')){
        //요소가 완전히 삭제됨
        $('div').remove()
       }
       else{
        //div 요소는 존재 내용만 지운다
        $('div').empty()
       }
    });
  });