4. 엘리먼트 제어

1. 자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text())

 
<p>I would like to say:</p>
<script>$("p").append("<strong>Hello</strong>");</script>
 

2. 형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore())

<p>I would like to say: </p>
<script>
$( "p" ).after( document.createTextNode( "Hello" ) );
</script>

3. 부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner())

 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrap( "<div></div>" );
</script>
 

4. 삭제 (.detach(), .empty(), .remove(), .unwrap())

<Before>

 
<h3>Hello</h3>
<p>how are you?</p>
<h3>i'm fine.</h3>
<p>me too.</p>
 
<button>
'p'를 remove()
</button>
 
<script>
$("button").click( function () {
     $("p").remove();
 });
</script>
 

<After>

5. 클래스 (.addClass(), .hasClass(), .removeClass(), .toggleClass())

 
<style>
.toggled {
         background: red;
}         
   
</style>
 
          <p class="blue">클릭하면 클래스에 "toggled" 추가</p>
          <p class="blue toggled">이미 "toggled"가 있으면</p>
          <p class="blue">"toggled"를 제거</p>
 
          <script>
          $("p").click(function() {
              $(this).toggleClass("toggled");
          });
          </script>
 

6. 속성제어 (.attr(), .prop(), .removeAttr(), .removeProp(), .val())

 
<input type="text" value=""/>
<h3>comment:</h3><p></p>
<script>
$("input").keyup( function () {
     var value = $(this).val();//val(): 값 로드
     $("p").text(value);
}).keyup();</script> <!--keyup: 키보드 떼는 순간 반영됨 -->
 

**attr() 정리**

$(선택자).attr() 해당 태그의 속성을 찾거나 수정한다.

$(선택자).attr(name) name 속성의 value를 출력

$(선택자).attr(name,value): name 속성의 value를 바꾼다.

$(선택자).attr(name,function(index,oldValue){ return newValue; });

7. 배열 출력(Array)

<배열 입력>

var array = [{url:"http://www.naver.com",name:"네이버"},
                 {url:"http://www.google.com",name:"구글"},
                 {url:"http://www.daum.net",name:"다음"}];
var output="";

<배열 출력>

$.each(array,function(index,item){ //for문처럼 활용
    output+="<h3><a href='"+item.url+"'>"+item.name+"</a></h3>"; //item==this
});
$("#test").append(output);