07.31(dom-element)

문서객체 제어

<ul>
    <li id="test1"><a href="https://www.naver.com">네이버로 이동</a></li>
    <li id="test2"></li>
    <li></li>
</ul>
<input type="button" value="확인" id="btn-1">
<input type="button" value="확인" id="btn-2">
<script>
$(function() {  //on load를 굳이 사용하는 이유는 다른 곳에 영향을 안주기 위함
    $("#btn-2").click(function() {
        //ul태그 버튼을 누르면 li태그 추가되도록 만들기(html태그 이용해야함)
        let s = "<li>test3</li>"; //이전요소 바뀜
    //    let s2 = $("<li>test4</li>");
        let s2 = $("<li></li>").text("test4").addClass("haha");

    //    $("ul").html(s2);  //이전요소 날라감
        $("ul").html($("ul").html() + s);  //이전요소 유지
        $("ul").append(s, s2);  //이전요소 유지(덧붙여 쓰기)
    });

    $("#btn-1").click(function() {
        // let s = $("#test1").html();
        // console.log(s);
        // $("#test2").html(s);

        let s = $("#test1").text();
        console.log(s);
        $("#test2").text($("#test1").html()); //html태그가 텍스트로 변환
    });
});
</script>

 

 

요소삽입1 : 추가할 요소 기준

<ul>
    <li>$(B).appendTo($(A)) : B를 A의 자식요소로 마지막에 추가</li>
    <li>$(B).prependTo($(A)) : B를 A의 자식요소로 처음에 추가</li>
    <li>$(B).insertAfter($(A)) : B를 A의 형제요소로 뒤에 추가</li>
    <li>$(B).insertBefore($(A)) : B를 A의 형제요소로 앞에 추가</li>
</ul>
<h1 id="test11"><span>A</span></h1>
<h1 id="test22"><span>A</span></h1>
<h1 id="test33"><span>A</span></h1>
<hr>
<h1 id="test44"><span>A</span></h1>
<input type="button" value="실행" id="btn-3">
<style>
.added{
    color: palegreen;
}
</style>
<script>
$("#btn-3").click(function() {
    let $b = $("<span>B</span>").addClass("added");

    // $b.appendTo($("#test11"));
    // $b.prependTo($("#test22"));
    // $b.insertAfter($("#test33"));
    $b.insertBefore($("#test44"));
});
</script>

 

 

요소삽입2 : 기존 요소 기준

<ul>
    <li>$(A).append($(B)) : B를 A의 자식요소로 마지막에 추가</li>
    <li>$(A).prepend($(B)) : B를 A의 자식요소로 처음에 추가</li>
    <li>$(A).After($(B)) : B를 A의 형제요소로 뒤에 추가</li>
    <li>$(A).Before($(B)) : B를 A의 형제요소로 앞에 추가</li>
</ul>
<h1 id="test55"><span>A</span></h1>
<h1 id="test66"><span>A</span></h1>
<h1 id="test77"><span>A</span></h1>
<hr>
<h1 id="test88"><span>A</span></h1>
<input type="button" value="실행" id="btn-4">
<script>
$("#btn-4").click(function() {
    $b = $("<span>B</span>").addClass("added");
    // $("#test55").append($b);
    // $("#test66").prepend($b);
    // $("#test77").after($b);
    $("#test88").before($b);
});
</script>

 

 

요소 삭제

remove : 제거할 요소의 이벤트 핸들러 제거

detach : 제거할 요소의 이벤트 핸들러 유지

<input type="button" value="확인" id="btn-5">
<div class="deltest">
    <div class="item"></div>
</div>
<hr>
<div class="new_area"></div>
<style>
.item {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: lightsteelblue;
    margin: 5px;
}
.lime{
    background-color: lime;
}
</style>
<script>
$(function() {
    $(".item").hover(function() {
        //mouseenter
        $(this).toggleClass("lime");
    }, function(){
        //mouseleave
        $(this).toggleClass("lime");
    });
    $("#btn-5").click(function() {
        // let $item = $(".item").remove();
        let $item = $(".item").detach();
        $(".new-area").append($item);   //$변수는 제이쿼리 변수라는 명시적 선언
    });
});
</script>