4.4 노드 생성/ 추가/ 삭제/ 이동

- 노드 생성

- 첫 번째 자식 노드로 추가

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

- 특정 노드의 이전 위치에 추가

- 특정 노드의 이후 위치에 추가

 

노드 생성

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

//////////////추가 버튼을 클릭할 때마다 신규 메뉴 아이템을 생성////////////////////

$(document).ready(function(){

  var count = 0

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

    count++;

 

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

    

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

  })

});

///////////////////////////////////////////////////////////////////////////////////////////

신규 노드를 첫 번째 자식 노드로 추가

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

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

//////////////추가 버튼을 클릭하면 ul.menu의 첫번째 자식 노드로 추가///////////

$(document).ready(function(){

  var count = 0;

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

    count++;

 

    $("ul.menu").prepend("<li>new menu"+ count + "</li>");

  })

}); 

//////////////////////////////////////////////////////////////////////////////////////////

신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가

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

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

/////추가 버튼시 신규 노드를 만들어 ul.menu의 첫 번째 자식 노드로 추가///////

$(document).ready(function(){

  var count=0;

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

    count++;

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

  })

});

//////////////////////////////////////////////////////////////////////////////////////////

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

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

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