JQuery ul li 동적 추가 - jQuery ul li dongjeog chuga

<ul>

<li id="menu1">menu1</li>

<li id="menu2">menu2</li>

<li id="menu3">menu3</li>

<li id="menu4">menu4</li>

<li id="menu5">menu5</li>

</ul>

 분류

 내용 

 jQuery DOM 핵심 프로퍼티 및 메서드 

 노드 생성 / 추가

노드 생성

 $("DOM 문자열");

첫 번째 자식 노드로 추가 

 $부모노드.prepend($추가노드)

 $추가노드.prependTo($부모노드)

마지막 번째 자식 노드로 추가

 $부모노드.append($신규노드)

 $신규노드.appendTo($부모노드)

특정 노드의 이전 위치로 추가

 $(기준노드).before($추가노드)

 $(추가노드).insertBefore($기준노드)

특정 노드의 다음 위치에 추가 

 $기준노드.after($추가노드)

 $추가노드.insertAfter($기준노드)

 노드 이동

첫 번째 자식 노드로 이동

 $추가노드.prependTo($이동노드)

마지막 번째 자식 노드로 이동

 $부모노드.append($이동노드)

 $이동노드.appendTo($부모노드)

 $(이동노드).before($기준노드)

 $(기준노드).insertBefore($이동노드)

 $기준노드.insertAfter($이동노드)

 노드 삭제

 $대상.remove()

모든 자식 노드 제거

$("#btnAdd").click(function() {

    count = 1;

$li = $("<li>new menu" + count + "</li>");

console.log($li.get(0));    

});

$("#javascriptbtnAdd").click(function() {

count++;

//신규 노드를 생성

var li = document.createElement("li");

//신규 노드의 텍스트 생성

var liText = document.createTextNode("new menu" + count);

li.appendChild(liText);

console.log(liText);

});

0

$부모노드.prepend($추가노드)

$추가노드.prependTo($부모노드)

//prepend()

$li = $("<li>new menu</li>");

$("ul").prepend($li);

//prependTo

$li = $("<li>new menu</li>");

$li.prependTo("ul");

$부모노드.append($신규노드)

$신규노드.appendTo($부모노드)

//append

$("ul").append("<li>new menu</li>");

//appendTo

$("<li>new menu</li>").appendTo("ul");

//선택자를 이용용하여 jQuery객체로 사용할 수 있다.

$li = $("<li>new menu</li>");

$("ul").append($li);

$($li).appendTo("ul");

$(기준노드).before($추가노드)

$(추가노드).insertBefore($기준노드)

$li = $("<li>new menu</li>");

//before

$("#menu3").before($li);

//insertBefore

$li.insertBefore("#menu3");

$기준노드.after($추가노드)

$추가노드.insertAfter($기준노드)

$li = $("<li>new menu</li>");

//after

$("#menu3").after($li);

//insertAfter

$li.insertAfter("#menu3");

$부모노드.prepend($이동노드)

$이동노드.prependTo($부모노드)

//prepend

var $menu3 = $("#menu3"); 

$("ul").prepend($menu3);

//prependTo

$("#menu3").prependTo("ul");

$부모노드.append($이동노드)

$이동노드.appendTo($부모노드)

//append

var $menu3 = $("#menu3"); 

$("ul").append($menu3);

//appendTo

$("#menu3").appendTo("ul");

$(이동노드).insertBefore($기준노드)

$(기준노드).before($노드)

var $menu3 = $("#menu3");

var $menu5 = $("#menu5");

//before

$("#menu5").before($menu3);

//insertBefore

$("#menu3").insertBefore($menu5);

$추가노드.insertAfter($기준노드)

$기준노드.after($추가노드)

var $menu3 = $("#menu3");

var $menu5 = $("#menu5");

//after

$("#menu5").after($menu3);

//insertAfter

$("#menu3").insertAfter($menu5);

var $menu3 = $("#menu3");

$menu3.remove();

$("#menu5").remove();

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