Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 01. 노드 생성 및 추가

CHAPTER 04. 노드 다루기 - 노드 생성/추가/삭제/이동.

Lensson 01. 노드 생성 및 추가

- 핵심 01: 노드 생성

- 핵심 02: 첫 번째 자식 노드로 추가

- 핵심 03: 마지막 번째 자식 노드로 추가

- 핵심 04: 특정 노드의 이전 위치에 추가

- 핵심 05: 특정 노드의 이후 위치에 추가

- 핵심 01: 노드 생성

사용법 : var $신규노드=$("신규DOM");

예제 01. 실행화면처럼 추가 버튼을 클릭할 때마다 신규 메뉴 아이템을 생성해 주세요.

1. jQuery를 이용한 풀이

$(document).ready(function() 
{
    var count = 0;
    $("#btnAdd").click(function() 
    {
        count++;
        // 신규 노드 생성
        var $li = $("<li>new menu" + count + "</li>");
 
        // 테스트를 위한 신규 노드 출력
        console.log($li.get(0));
    })
});

jQuery에 비해 정말 복잡하기 때문에 많은 프로젝트에서 jQuery를 사용합니다.

* jQuery 노드 생성 기능 역시 jQuery가 직접 생성하는 것이 아니라, 모두 자바스크립트 DOM 기능을 사용한다는 것입니다.

즉, 위의 자바스크립트 DOM을 활용한 노드 생성 코드를 우리 대신 jQuery 내부에 구현하고 있다는 것이죠.

- 핵심 02: 첫 번째 자식 노드로 추가

사용법

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

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

예제 02. 추가 버튼을 클릭하면 실행화면처럼 신규 메뉴 아이템을 생성한 후 ul.menu의 첫 번째 자식노드로 추가해 주세요.

풀이 01: 문자열, prepend()를 이용한 경우 (가장 간단한 방법) (이걸로쓰기)

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("ul.menu").prepend("<li>new menu"+count+"</li>");
    })
});

풀이 02: jQuery 객체, prepend()를 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    var $newItem =$("<li>new menu"+count+"</li>"); 
    $("ul.menu").prepend($newItem);
    })
});

풀이 03: jQuery객체, prependTo()를 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    var $newItem =$("<li>new menu"+count+"</li>"); 
    $newItem.prependTo("ul.menu");
    })
});

* prependTo() 메서드는 prepend() 메서드를 사용할 때 $추가노드 위치와 $부모노드 위치가 바뀌어 있을 뿐 동일한 기능을 합니다.

- 핵심 03: 마지막 번째 자식 노드로 추가

사용법

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

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

append()와 appendTo()를 이용하면 신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가할 수 있습니다.

풀이 01: 문자열, append()을 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("ul.menu").append("<li>new menu"+count+"</li>");
    })
});
 

풀이 01: 문자열, appendTo()을 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("<li>new menu"+count+"</li>").appendTo("ul.menu");
    })
});

- 핵심 04: 특정 노드의 이전 위치에 추가

사용법

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

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

신규 노드를 특정 노드의 형제 노드로 추가하고 싶은 경우 insertBefore()와 before()를 사용합니다.

예제 04. 추가 버튼을 클릭하면 다음 실행화면처럼 신규 노드를 만들어 select 클래스가 적용된 메뉴 아이템의 이전 위치에 추가해 주세요.

풀이 01 - 문자열, insertBefore()를 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("<li>new menu"+count+"</li>").insertBefore("ul.menu li.select");
    })
});

풀이 02 - 문자열, before()를 이용한 경우 (이걸로쓰기)

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("ul.menu li.select").before("<li>new menu"+count+"</li>");
    })
});

- 핵심 05: 특정 노드의 이후 위치에 추가

사용법

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

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

예제 05. 추가 버튼을 클릭하면 다음 실행화면처럼 신규 노드를 만들어 select 클래스가 적용된 메뉴의아이템의 다음 위치에 추가해 주세요.

풀이 01 - 문자열, insertAfter()를 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("<li>new menu"+count+"</li>").insertAfter("ul.menu li.select");
    })
});

풀이 02 - 문자열, after()를 이용한 경우

$(document).ready(function()
{    
    var count=0;
    $("#btnAdd").click(function()
    {
    count++;
    // 신규 노드 생성
    $("ul.menu li.select").after("<li>new menu"+count+"</li>")
    })
});