[jQuery] 노드 생성/ 추가 / 삭제 / 이동

1.노드생성

var 신규노드 = $("신규 DOM");

ex) var $newNode = $("<li>New Node</li>");

    DOM을 $()함수에 매개변수로 넣음으로써 jQuery객체로 return 받는다.

    노드를 생성한다는게 DOM을 제이쿼리로 감싼다는 의미

2.노드추가 / 노드이동

노드를 추가할 때는 새로운 노드를 생성하면 된다. (아래의 예제는 노드 추가기준으로 만든 예제이다)

그리고 노드를 이동하려면 현재 있는 DOM에서 노드를 생성하여 똑같이 사용하면 된다.

만약 $("<li>New Node</li>").prependTo("ul") 이런식으로 추가 노드를 새로 만들어 사용하면 새로운 노드가 생성되어 <ul>에 맨 앞에 생성 된다.

하지만 $("#기존노드 아이디").prependTo("ul") 등과 같이 기존노드에 대한 노드에 대해 prependTo를 하면 새로운 노드가 생성되어 <ul>맨 앞에 생성되는게 아니라 기존 노드가 <ul>맨 앞에 생성된다.

첫번째 자식노드로 추가

$부모노드.prepend($추가/이동노드)

$추가/이동노드.prependTo($부모노드)

ex) $("ul").prepend("<li>New Node</li>")

    $("<li>New Node</li>").prependTo("ul")

마지막 자식노드로 추가

$부모노드.append($추가/이동노드)

$추가/이동노드.appendTo($부모노드)

ex) $("ul").append("<li>New Node</li>")

    $("<li>New Node</li>").appendTo("ul")

특정 위치로 노드 추가

    1.특정 노드 이전 위치에 노드 추가

      $추가/이동노드.insertBefore($기준노드)

      $기준노드.before($추가/이동노드)

      ex) $("<li>New Node</li>").insertBefore($(".menuitem2"));

          $(".menuitem2").before("<li>New Node</li>");

      

    2.특정 노드 이후 위치에 노드 추가 

      $추가/이동노드.insertAfter($기준노드)

      $기준노드.after($추가/이동노드)

      ex) $("<li>New Node</li>").insertAfter($(".menuitem2"));

          $(".menuitem2").after("<li>New Node</li>");

3.노드 삭제

특정 노드 제거

$대상.remove()

ex) $("li").remove()

모든 자식 노드 제거

$대상.children().remove()

ex) $("ul").children().remove();

4.노드 내용 읽기 및 변경

노드 내용 읽기

$대상.html()

$대상.text()

ex) $("li").html();

    $("li").text();

* html과 text는 모드 문자열을 읽지만 html()메서드는 특정 노드의 내부 내용을 마크업까지 확인 가능(태그 정보 포함)

  노드 내용은 자신의 정보는 포함되지 않고 자식을 포함한 자손 노드 정보만 사용된다.

  또한 메서드 결과는 자바스크립트 DOM이 아니라 단순 문자열이다.

  차이점은 아래 이미지 참조

노드 내용 수정

$대상.html(수정할 태그 문자열)

$대상.text(수정할 텍스트)

* 노드 내용을 수정하려면(수정 내용이 html태그를 포함한다면) html()메서드를 사용하고 단순 텍스트만 변경하려면 text()를 사용한다.

* $대상.html(HTML태그 문자열) 메서드를 이용하면 자식노드도 추가할 수 있다.

* $대상.html("") 메서드를 이용하면 대상의 자식노드가 삭제된다. 대상의 자식 HTML의 태그가 "" 이 되기 때문