웹브라우저 JavaScript

jQuery 노드 변경 API

jQuery를 이용해서 노드를 제어하는 방법을 알아보자. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. 

http://api.jquery.com/category/manipulation/

추가

추가와 관련된 주요한 메소드는 4가지다. 각각의 관계를 그림으로 나타내면 아래와 같다.

아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예이다. (실행)

<div class="target">
	content1
</div>

<div class="target">
	content2
</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('.target').before('<div>before</div>');
	$('.target').after('<div>after</div>');
	$('.target').prepend('<div>prepend</div>');
	$('.target').append('<div>append</div>');
</script>

제거

제거와 관련된 API는 remove와 empty가 있다. remove는 선택된 엘리먼트를 제거하는 것이고 empty는 선택된 엘리먼트의 텍스트 노드를 제거하는 것이다. (실행)

<div class="target" id="target1">
	target 1
</div>

<div class="target" id="target2">
	target 2
</div>

<input type="button" value="remove target 1" id="btn1" />
<input type="button" value="empty target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#btn1').click(function(){
		$('#target1').remove();
	})
	$('#btn2').click(function(){
		$('#target2').empty();
	})
</script>

바꾸기

replaceAll과 replaceWith는 모두 노드의 내용을 교체하는 API이다. replaceWith가 제어 대상을 먼저 지정하는 것에 반해서 replaceAll은 제어 대상을 인자로 전달한다. (실행)

<div class="target" id="target1">
	target 1
</div>

<div class="target" id="target2">
	target 2
</div>

<input type="button" value="replaceAll target 1" id="btn1" />
<input type="button" value="replaceWith target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#btn1').click(function(){
		$('<div>replaceAll</div>').replaceAll('#target1');
	})
	$('#btn2').click(function(){
		$('#target2').replaceWith('<div>replaceWith</div>');
	})
</script>

복사

노드를 복사하는 방법을 알아보자. (실행)

<div class="target" id="target1">
	target 1
</div>

<div class="target" id="target2">
	target 2
</div>

<div id="source">source</div>

<input type="button" value="clone replaceAll target 1" id="btn1" />
<input type="button" value="clone replaceWith target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#btn1').click(function(){
		$('#source').clone().replaceAll('#target1');
	})
	$('#btn2').click(function(){
		$('#target2').replaceWith($('#source').clone());
	})
</script>

이동

dom manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 난다. (실행)

<div class="target" id="target1">
	target 1
</div>

<div id="source">source</div>

<input type="button" value="append source to target 1" id="btn1" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#btn1').click(function(){
		$('#target1').append($('#source'));
	})
</script>

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다
  2. tachyon
    감사합니다.
  3. yihsang
    이고잉님 고맙습니다.

    .click([event data], handler) 형식의 예제를 찾아보기 위해서
    http://stackoverflow.com/ 를 찾아보았습니다.

    var btn1 = $('#btn1');
    var btn2 = $('#btn2');
    var tar1 = $('#target1');
    var tar2 = $('#target2');

    btn1.click({target:tar1}, function(event){
    removeTarget(event.data.target);
    });

    btn2.click({target:tar2}, function(event){
    emptyTarget(event.data.target);
    });

    // btn1.click(tar1, removeTarget);
    // btn2.click(tar1, emptyTarget);;

    function removeTarget(target){
    console.log('1');
    target.remove();
    }

    function emptyTarget(target){
    console.log('2');
    target.empty();
    }
  4. JustStudy
    2016.07.08 금
    고맙습니다 3.
  5. JustStudy
    2016.07.01금
    고맙습니다 2.
  6. 사람구실
    var btn1 = $('#btn1');
    var btn2 = $('#btn2');
    var tar1 = $('#target1');
    var tar2 = $('#target2');

    btn1.click(removeTarget(tar1));
    btn2.click(emptyTarget(tar2));

    function removeTarget(target){
    console.log('1');
    target.remove();
    }

    function emptyTarget(target){
    console.log('2');
    target.empty();
    }

    이렇게 하면 버튼을 누르지도 않았는데 바로 실행되네요... 근데 비슷한 방식으로,

    var btn1 = $('#btn1');
    var btn2 = $('#btn2');
    var tar1 = $('#target1');
    var tar2 = $('#target2');

    btn1.click(removeTarget);
    btn2.click(emptyTarget);

    function removeTarget(){
    console.log('1');
    tar1.remove();
    }

    function emptyTarget(){
    console.log('2');
    tar2.empty();
    }

    이렇게 하면 올바르게 실행이 됩니다.

    click() 함수에 파라메터로 함수를 넣을 때, 인자를 지니는 함수를 넣을 순 없는 건가요?
    즉, 함수를 넣더라도 .click(func()) 또는 .click(func(obj)) 이렇게 사용하면 안되는 건가요?
    .click(func) 이렇게 함수 이름만 넣어야 되더라구요....그럼 인자를 지니는 함수를 click함수에서 인자로 사용할 때는 어떠한 방식으로 작성해야하나요??

    즉,

    btn1.click(함수이름);

    이건 되는데, 왜

    btn1.click(함수이름()) 또는 btn1.click(함수이름(obj));

    이건 안되는지가 너무 헷갈립니다....

    ----------------------------------------------------------------------------------------------------
    고민해보니,

    btn1.click(function(){
    removeTarget(tar1);
    });

    btn2.click(function(){
    emptyTarget(tar2);
    });

    function removeTarget(target){
    target.remove();
    }

    function emptyTarget(target){
    target.empty();
    }

    이렇게 하면 될 것 같네요 또 찾아보니까.

    .click(obj, function); //이런식으로도 쓸 수 있는데,

    .click(tar1, removeTarget);

    function removeTarget(target){
    target.remove();
    }

    했더니 target을 jquery 객체로 못받아들인건가,,, 오류가 나네요. remove()라는 함수를 정의하지 않았다고..

    덧붙여서 혹시

    .click([event data], handler)

    이러한 형식으로 사용하는 예제나 방법 아시는 분 있으면 부탁드립니다.
    event data가 어떤 배열 오브젝트를 의미한 건지...여러 생각이 드네요...

    흐 ㅠㅠ
  7. 이주환
    2016. 04. 27
    잘보고 갑니다~!
  8. JustStudy
    고맙습니다
  9. arachi
    감사합니다~ 공부 너무너무 재밌게 하고있어요~~
  10. WayneKing
    고고고고고고고고
  11. 코딩!
    node가 와따리 가따리 !ㅎㅎ
  12. will
    하나의 클릭 이벤트로 동시다발적인 액션을 일어나도록 하기위해 함수로 묶어주는것 같습니다.
    대화보기
    • 머머
      $('#btn1').click(function(){
      $('#target1').remove();
      })

      이 부분에서 굳이 왜 익명함수를 만드는지 궁금해요.

      $('#btn1').click($('#target1').remove());

      이렇게 하는것과의 차이점을 알고싶어요!
    • 골뱅이미디어스크린앤드
      egoing선생님은 천사인거 같아여ㅠㅠ
    • 육점이
      복사해서 append,prepend,after,before을 사용하지 않는다면 이동의 개념이 되는거군요!! 항상 감사합니다 ~!!!
    • 부루
      혹시 익스플로러에서 제이쿼리가 잘 안되시면 아래 코드를 <head></head> 태그사이에 추가하니까 되네요.

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

      출처 : http://kimsq.cweb.co.kr....../34

      이고잉님 강의 감사합니다. 너무 쉽게 가르쳐주시네요 ㅎㅎ
    • 창가
      1/3 동영상에서 class name을 id로 설명하고 있습니다.
      이전 강좌를 봐서 알아서 잘 들었습니다.!~
    • 규빈이아빠
      훌륭한 강의 잘 들었습니다^^
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기