[J] JavaScript & jQuery 공부하기 #25

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

30. 문서 객체 생성
  * prepend()와 append() 메소드
    - prepend() : 특정 문서 객체의 이전 부분에 문서 객체를 생성함
    - append() : 특정 문서 객체의 맨 뒤에 문서 객체를 생성함

    기본 상태 : < p>HELLO</ p>
    메소드 사용 : $("p").prepend("< b>prepend</ b>");
                  $("p").append("< b>append</ b>");
    결과 : < b>prepend</ b>
           < b>HELLO</ b>
           < b>append</ b>

  * before()와 after() 메소드
    - before() : 이전 문서 객체를 생성
    - after() : 다음에 문서 객체를 생성

    기본 상태 : < p>HELLO</ p>
    메소드 사용 : $("p").before("< b>before</ b>");
                  $("p").after("< b>after</ b>");
    결과 : < b>before</ b>
           < b>HELLO</ b>
           < b>after</ b>

  * 예제
  - prepend. append
  < script type="text/javascript">
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("p").prepend("< b>prepend</ b>");
        $("ol").prepend("< li>prepend item</ li>");
      });
      $("#btn2").click(function(){
        $("p").append("< b>append</ b>");
        $("ol").append("< li>append item</ li>");
      })
    });
  </ script>

  - before. after
  < script type="text/javascript">
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("p").before("< b>before</ b>");
        $("ol").before("< li>before item</ li>");
      });
      $("#btn2").click(function(){
        $("p").after("< b>after</ b>");
        $("ol").after("< li>after item</ li>");
      });
    });
  </ script>