jQuery 노드 요소 수정

// 신규노드 생성
var $li = $("<li>new menu</li>");

// 신규노드를 첫번째 자식노드로 추가
$("ul.menu").prepend($li);
$li.prependTo("ul.menu");

// 신규노드를 마지막 자식노드로 추가
$("ul.menu").append($li);
$li.appendTo("ul.menu");

// 신규노드를 특정노드의 이전 위치에 추가
$li.insertBefore("li.select");
$("li.select").before("$li");

// 신규노드를 특정노드의 다음 위치에 추가
$li.insertAfter("li.select");
$("li.select").after("$li");

// 특정노드를 첫번째 자식노드로 이동
$("ul.menu").prepend($(this));
$(this).prependTo("ul.menu");

// 특정노드를 마지막 자식노드로 이동
$("ul.menu").append($(this));
$(this).appendTo("ul.menu");

// 특정노드를 특정노드의 이전 노드로 이동
$(this).insertBefore("li.select");
$("li.select").before($(this));

// 특정노드를 특정노드의 다음 노드로 이동
$(this).insertAfter("li.select");
$("li.select").after($(this));

// 특정 노드의 자손노드 내용을 문자열로 읽기
$("ul").html()
// 특정 노드의 텍스트노드 내용을 문자열로 읽기
$("li").text()
// 일치하는 모든 요소에 새로운 콘텐츠를 추가한다. 리턴: 교체된 요소들
.replaceWith()
// 노드 내용 수정하기
$("ul").html("<li>new text</li>")
$("li").text("new text")

// 특정 노드 삭제
$("ul.menu li.select").remove();

// 모든 자식노드 삭제
$("ul").children().remove();
$("ul").html("");

// Ctrl + X
$("ul").detach()
// Ctrl + C
$("ul").clone();


/* 예시 */
var $ulMenu = $("ul.menu");
$("ul.menu li").click(function() {
    $ulMenu.prepend($(this));
});
// 클릭한 요소 삭제
$("ul.menu li").click(function() {
    $(this).remove();
});
// 각 요소의 텍스트에 <em>태그 추가하기
$("li.hot").html(function() {
  return "<em>" + $(this).text() + "</em>";
});

// 스타일값 구하기
.css("font-size");
// 여러 스타일값 구하기
.css(["font-size", "color"]);

// 스타일값 설정하기
.css("color", "red");
.css({ left: 50, top: 50 });

// 선택한 대상에 클래스 추가
.addClass("select info");

// 선택한 대상의 모든 클래스 삭제
.removeClass();
// 선택한 대상의 특정 클래스 삭제
.removeClass("select info");

// 선택한 대상에 특정 클래스 추가/제거 토글
.toggleClass("select");

// 선택한 대상의 특정 속성값 구하기
.attr("href");
// 선택한 대상의 모든 data- 속성값 구하기
.data();
// 선택한 대상의 특정 data- 속성값 구하기
.data("name");

// 선택한 대상의 속성값 설정/변경하기
.attr("src", "./images/02.jpg");
// 선택한 대상의 data- 속성값 설정/변경하기
.data("tel", "1234");