[눈에확] append // appendTo

$("클래스명").append("추가할내용");

    -  클래스명 뒤에 추가할 내용을 삽입한다.

$("추가할내용").appendTo("클래스명");

    - 추가할 내용을 클래스명 뒤에 삽입한다.


*두 메서드의 예제는 W3Schools 의 예제를 사용하였습니다.

/* append */
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
         
        $("#btn1").click(function(){         //button btn1 클릭시.     
            $("p").append(" <b>Appended text</b>.");     // p태그 뒤에 <b>Appended text</b>.를 삽입함.
        });
  
        $("#btn2").click(function(){        // button btn2 클릭시.     
            $("ol").append("<li>Appended item</li>");   // ol 태그 뒤에 <li>Appended item</li>을 삽입함.   
        });
    });
</script>
 
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
 
/* appendTo */
 
<button id="btn1">Append text</button><button id="btn2">Append list item</button>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
 
    $(document).ready(function(){  
        $("button").click(function(){       // button을 클릭시    
            $("<span>Hello World!</span>").appendTo("p");  // p태그 뒤에 <span>Hello World!</span>를 삽입함.  
        });
    });
</script>
 
<button>Insert span element at the end of each p element</button>
 
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

결과>