jQuery 노드 변경 API

jQuery를 이용해서 노드를 제어하는 방법

노드 추가

  • before : 선택 요소의 이전에 노드 추가

  • after : 선택요소의 다음에 노드 추가

  • prepend : 선택요소의 하위 노드 추가 이미 요소가 있다면 가장 앞에 추가

  • append : 선택요소의 하위 노드 추가 이미 요소가 있다면 가장 뒤에 추가

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div style="border: 1px solid red" class="target">
    content1
  </div>
  <div style="border: 1px solid red" class="target">
    content2
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    var $target = $('.target');
    
   // target의 이전 형제 노드로 추가  
    $target.before('<div>before</div>');
   // target의 다음 형제 노드로 추가  
    $target.after('<div>after</div>');
   // target의 첫번째 자식노드로 추가
    $target.prepend('<div>prepend</div>');
   // target의 마지막 자식노드로 추가  
    $target.append('<div>append</div>');
  </script>
</body>
</html>

노드 삭제

  • remove : 노드 자체를 삭제

  • empty : 노드 안의 텍스트 노드만 삭

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div style="border: 1px solid #000; height: 30px;" id="target1">
    target1
  </div>
  <br />
  <div style="border: 1px solid #000; height: 30px;" id="target2">
    target2
  </div>
  <input type="button" value="target1 remove" onclick="fn_remove1()">
  <input type="button" value="target2 remove" onclick="fn_remove2()">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    function fn_remove1() {
      $target = $('#target1');
      
      // 노드가 지워지기 때문에 테두리가 사라짐
      $target.remove();
    }
    function fn_remove2() {
      $target = $('#target2');
      
      // 텍스트만 지워지기 때문에 테두리가 남아있음
      $target.empty();
    }
  </script>
</body>
</html>

노드 변경

  • replaceWith : 제어 대상을 먼저 지정하는 것

  • replaceAll : 제어 대상을 인자로 전달함

  • clone : 노드 복사

  • dom manipulation API의 인자로 특정 노드를 선택하면 이동 효과

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h2>노드 변경</h2>
  <div id="target1">target1</div>
  <div id="target2">target2</div>
  <input type="button" value="replaceAll" onclick="fn_replaceAll()">
  <input type="button" value="replaceWith" onclick="fn_replaceWith()">
  
  <h2>노드 복사</h2>
  <div id="target3">target3</div>
  <input type="button" value="clone" onclick="fn_clone()">
  
  <h2>노드 이동</h2>
  <div style="border: 1px solid #000" id="target4">target4</div>
  <div id="target5">target5</div>
  <input type="button" value="move" onclick="fn_move()">
  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
      function fn_replaceAll() {  
        $('<div>replaceAll</div>').replaceAll('#target1');
      }
     
     function fn_replaceWith() {
       $('#target2').replaceWith('<div>replaceWith</div>');
     }
     
     function fn_clone() {
        $('#target3').after($('#target3').clone())
     }
     
     function fn_move() {
       $('#target4').append($('#target5'));
     }
    </script>
</body>
</html>

Previous노드의 변경Next문자열로 노드 제어

Last updated

Was this helpful?