jQuery 08. 요소 생성 및 제거 메소드

동적으로 요소생성

1) 문자열로 만드는 방법

 let el1 = "<p> 문자열로 요소생성</p>"

2) DOM 메소드로 요소객체 만드는 방법

  let el2 =  document.createElement("p")  ==> <p></p> 요소객체 (요소노드생성) 
  let text = document.createTextNode(" DOM메소드로 요소생성") // 텍스트 노드 생성
  el2.appendChild(text); 

3) jQuery로 요소생성

 let el3 = $("<p></p>").text("jQuery로 요소생성");

 

  <button id="btn">요소생성</button>
    <div id="area1">
    </div>
    <script>
        $(function(){
            $("#btn").click(function(){
                //<p>~~</p>
                // 1. 문자열로 만드는 방법 
                let el1 = "<p>Create Element By Text</p>"; // 문자열 
                
                // 2. DOM 메소드로 요소객체로 만드는 방법 ( 요소노드 : createElement, 텍스트노드 : createTextNode)
                let el2 = document.createElement("p"); //<p></p> 요소객체
                let text = document.createTextNode("Create Element By DOM"); // 텍스트노드 
                el2.appendChild(text); // <p>Create Element By DOM</p>

                // 3. jQuery로 요소 생성
                let el3 = $("<p></p>").text("Create Element By jQuery"); 
               
                $("#area1").append(el1,el2,el3); // append() : 특정 요소 안에 자손으로 추가
            })
        })
    </script>

>> 화면 출력시 append()메소드 

 

삽입관련 메소드 

선택된 요소를 기준으로 새로운 요소를 추가시켜주는 메소드 

     $(A).append(B) : A요소 내 뒷부분에 B를 추가 (자손/ 하위)
     $(A).prepend(B) : A요소 내 앞부분에 B를 추가 (자손/하위)

     $(A).after(B) : A요소 뒷부분에 B를 추가 (동위)

     $(A).before(B) : A요소 앞부분에 B요소를 추가 (동위)

 

 

    $(B).appendTo(A) : A요소 내에 뒷부분에 B를 추가(자손/하위) 
    $(B).prependTo(A) : A요소 내에 앞부분에 B를 추가(자손/하위) 

    $(B).insertAfter(A) : B를 A요소 뒤에 추가 

    $(B).insertBefore(A) : B를 A요소 앞에 추가 

 

  <div id="test1">
        <span>A</span>
    </div>
    <div id="test2">
        <span>A</span>
    </div>
    <div id="test3">
        <span>A</span>
    </div>
    <div id="test4">
        <span>A</span>
    </div>

    <script>
        $(function(){

          
            $("#test1").append("<span class='added'>B</span>");
            $("#test2").prepend("<span class='added'>B</span>");
            $("<span class='added'>B</span>").insertBefore("#test3");
            $("<span class='added'>B</span>").insertAfter("#test4");

        })
    </script>

A

A

A

A

 

요소 객체 복제 메소드 

 변수 = $("선택자").clone([true|false]) : 선택된 요소 객체를 복제해서 반환해주는 메소드 
  true | false : 복제할 요소에 걸려있는 이벤트까지 복사할 것인지 지정 ( 기본값 false)

 <div id="clone-test">       
        <!--복제할 요소-->
        <div id="item1" class="item">
            <span>안녕</span>
        </div>
    </div>
    <button id="clone">복제</button>
    
    <div id="clone-result">

    </div>

    <script>
        $(function(){
            //복제할 요소에 hover이벤트
            $(".item").hover(function(){ //mouseenter 
                $(this).addClass("purple");
            },function(){ //mouseout
                $(this).removeClass("purple");
            });
        })

        //복제버튼 클릭시 #item1요소 복사해서 또다른 div안에 붙여넣기
        $("#clone").click(function(){
          $("#clone-result").append($("#item1").clone(true));

        })


    </script>

안녕

 

요소 객체 제거 및 잘라내기 메소드

$("선택자"). empty() : 선택된 요소의 하위 요소들을 제거시켜주는 메소드 (선택된 요소 삭제하기위해서는 상위요소 선택)

변수 = $("선택자").remove()| detach() : 선택된 요소 제거 후 해당 제거된 요소를 반환해주는 메소드 (잘라내기)
> remove() : 잘라낸 요소의 이벤트 안가져옴
> detach() :잘라낸 요소의 이벤트 가져옴 

    <div id="remove-test2">
        <!--제거할 요소-->
        <div id="item2" class="item">
            <span>안녕</span>
        </div>
    </div>

    <button id="empty3">제거</button>
    <button id="remove3">잘라내기1</button>
    <button id="detach3">잘라내기2</button>

    <div id="remove-result12"></div>
    
    <script>
        $(function(){
            $("#empty3").click(function(){
               // $("#item2").empty(); // 선택한요소의 하위요소 비워줌
                $("#remove-test2").empty();
            })

            $("#remove3").click(function(){
                const el = $("#item2").remove(); // 제거할요소 선택해서 제거가능 
                $("#remove-result12").append(el); //이벤트는 작동하지않음 
            })

            $("#detach3").click(function(){
                const el = $("#item2").detach();
                $("#remove-result12").append(el); //이벤트도 작동 
            })

        })
    </script>

안녕