jquery - jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
</head>
<body>
 
    <img alt="" src="b_pic1.jpg" width="150" height="120">
    <br>
    <br>
 
    <button id="btn1">insert before</button>
    <button id="btn2">insert after</button>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btn1").click(function() {
                $("img").before("<b>before</b><br>");
            });
            $("#btn2").click(function() {
                $("img").after("<br><b>after</b>");
            });
        });
    </script>
 
    <br>
    <br>
 
    <div id="div1"
        style="height: 100px; width: 500px; border: 1px solid black; background-color: yellow;">
        여기가 div1 태그입니다
 
        <p id="pid">백운규 "전기요금 누진제 7·8월 한시적 완화"(2보)</p>
 
        <p class="pcls">"사회적 배려계층, 냉방지원 대책 마련"</p>
 
    </div>
 
    <br>
    <br>
 
    <button id="btn3">버튼</button>
 
    <script type="text/javascript">
        $(function() {
            $("#btn3").click(function() {
                //    $("#div1").remove();                // 전체 삭제
                //    $("#div1").empty();                // div 안의 모든 요소를 비운다
                //     $(".pcls").remove();
                $("p").remove("#pid, .pcls");
            });
        });
    </script>
 
</body>
</html>

비포_애프터_문자열_추가_삭제.PNG

jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

단축키

Articles