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

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

Lensson 04. 노드 내용 읽기 및 변경

- 핵심 01: 노드 내용을 문자열로 읽기

- 핵심 02: 노드 내용 수정하기

- 핵심 03: 노드 내용을 이용해 여러 개의 자식 노드 추가하기

- 핵심 04: 노드 내용을 이용해 모든 자식 노드 제거하기

- 핵심 01: 노드 내용을 문자열로 읽기

사용법:

$대상.html()

$대상.text()

예제 01. 확인버튼(#ok)을 누르면, ul 노드의 내부 내용을 실행화면처럼 문자열로 출력해 주세요

풀이 01: html()을 이용하는 경우

html() 메서드를 이용하면 특정 노드의 내부 내용을 마크업까지 포함하여 확인할 수 있습니다.

html 메서드 결과는 자바스크립트 DOM 객체가 아닌, 단순한 문자열입니다.

또 노드 내용에는 자신의 정보가 포함되지 않고, 오직 자식을 포함한 자손 노드 정보만이 사용됩니다.

$(document).ready(function()
{      
    $("#ok").click(function()
    {
        console.log($(".menu").html());
    })
});
 

풀이 02:text()를 이용하는 경우

text() 메서드를 이용하면 마크업 내용을 제외한 텍스트 노드의 내용만을 문자열로 구할 수 있습니다

실행화면에서 알 수 있는 것처럼 <li> 태그와 같은 정보가 제외된 것을 확인할 수 있습니다.

$(document).ready(function()
{      
    $("#ok").click(function()
    {
        console.log($(".menu").text());
    })
});
 

- 핵심 02: 노드 내용 수정하기

사용법 : 

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

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

예제 02. 실행화면처럼 메뉴 아이템을 클릭하면 메뉴 아이템의 내용을 다음과 같이 변경해 주세요

$(document).ready(function()
{
    $("ul.menu li").click(function()
    {
    $(this).html("<a href='http://www.webdongne.com'>new menu"+ (1+$(this).index()));
    // 또는
    var $item = $(this);
    $item.html("<a href='http://www.webdongne.com'>new menu"+ (1+$item.index()));
    })
});

변경할 노드 내용에 태그 정보가 포함된 경우 위의 풀이처럼 html() 매서드를 사용해야 합니다.

* 노드 내용 수정 시 노드 내용에 태그 정보가 포함돼 있는 경우에는 html() 메서드를 사용하고,

일반적인 글자인 경우 text() 매서드를 사용하면 됩니다.

- 핵심 03: 노드 내용을 이용해 여러 개의 자식 노드 추가하기

사용법 : $대상.html("추가할 태그 문자열")

예제 03. 버튼을 클리하면  실행화면처럼 메뉴 아이템을 10개 추가해 주세요

풀이 01: append() 메서드를 이용하는 경우

$(document).ready(function()
{
    $("#add").click(function()
    {
        for(var i=1;i<=10;i++)
        {
        // 추가할 노드를 문자열로 만든 후
        var data="<li>menu"+i+'</li>';
        // 노드 내용에 적용
        $("ul.menu").append(data);
        }
    })
});

풀이 02: html() 메서드를 이용하는 경우

$(document).ready(function()
{
    $("#add").click(function()
    {    
        // 추가할 노드를 문자열로 만든 후
        var data = "";
        for(var i=1;i<=10;i++)
        {
        var data="<li>menu"+i+'</li>';
        // 노드 내용에 적용
        $("ul.menu").html(data);
        }
    })
});

* html() 메서드를 사용하는 게 훨씬 더 효율적이며 빠르다.

- 핵심 04: 노드 내용을 이용해 모든 자식 노드 제거하기

사용법 : $대상.html("")

자식 노드를 모두 지우고 싶을때 remove() 메서드 대신 html() 메서드를 사용하면 좀더 효과적입니다

예제 04. 실행화면처럼 버튼을 클릭하면 메뉴 아이템을 모두 지워 주세요.

풀이 01: html() 메서드를 이용하는 경우

$(document).ready(function()
{
    $("#remove").click(function()
    {
        $("ul.menu li").html("");
    })
});

풀이 02: remove() 메서드를 이용하는 경우

$(document).ready(function()
{
    $("#remove").click(function()
    {
        $("ul.menu li").remove();
    })
});

풀이 01 처럼 html() 메서드에 빈 문자열을 적용해 호출하면 노드 내용인 자식 노드 및 자손 노드를 아주 쉽게 제거할 수 있습니다

풀이 02 처럼 remove() 메서드를 사용해 처리할 수 있지만 이 방법의 경우 remove() 메서드 내부에서 루프를 돌며 노드를 하나씩

삭제하기 때문에 풀이 02보다는 풀이 01이 더 효과적입니다.