336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

jQuery 노드의 내용 읽고 변경하기

페이지를 개발하다 보면 특정 이벤트 발생시에 DB에서 입력된 값을 HTML로 그려줄 때가 있습니다. 이럴 때 노드를 대량으로 추가 또는 삭제하여 변경해주어야 합니다.

여기서 말하는 노드 내용은 노드 내부에 들어있는 마크업 노드와 텍스트 노드 정보를 문자열로 표현하는 것을 의미합니다.

html() text() 차이

아래 예제를 가지고 html()과 text()의 차이를 설명하겠습니다.

1
2
3
4
5
6
7
<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>

html()과 text()를 콘솔 로그로 찍어보았습니다.

1
2
console.log($("ul").html());
console.log($("ul").text());
cs

html() 메서드를 사용하면 특정 노드의 내부 내용을 마크업까지 확인할 수 있습니다. 주의해야 할 사항은 html() 메서드 결과는 자바스크립트 DOM 객체가 아닌 단순한 문자열입니다. 그리고 html()을 사용하면 자신의 태그 정보는 나오지 않고 자손의 노드 정보만 나옵니다.

1
2
3
4
5
<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>

text() 메서드를 사용하면 마크을 제외한 오로지 텍스트 노드만의 내용만을 확인할 수 있습니다.

1
2
3
4
5
menu1
menu2
menu3
menu4
menu5

html()로 노드 내용 수정하기

1
2
$대상.html(수정할 태그 문자열)
$대항.text(수정할 텍스트)

아래 버튼 3가지가 있는데 차례로 눌러보면

textBtn을 클릭하면 아이디의 menu1의 text가 new menu1로 변경됩니다.

htmlBtn을 클릭하면 text가 new menu2로 변경되고 제 블로그로 페이지가 이동합니다.

question을 클릭하면 a태그가 없어지고 text가 new new menu로 변경됩니다.

변경할 노드 내용에 태그 정보가 포함되어 있으면 html() 을 사용하면 됩니다. 만약 text() 메서드를 사용하는 경우 정보 자체가 일반 텍스트 정보로 추가돼 버리는 문제가 발생합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <script>
        var count = 0;
        $(document).ready(function() {
            $("#textBtn").click(function() {
                $("#menu1").text("new menu1");
            });
            
            $("#htmlBtn").click(function() {
                $("#menu2").html('<a href="http://ktko.tistory.com">new menu2');
            });
            
            $("#question").click(function() {
                $("#menu2").text('new new menu2');
            });
        });
        
        
    </script>
    
    <div class="container">
        <input type="button" id="textBtn" value="text()"/>
        <input type="button" id="htmlBtn" value="html()"/>
        <input type="button" id="question" value="question"/>
        
        <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>
    </div>
</body>
Colored by Color Scripter
cs

여러 개의 자식 노드 추가하기

1
$대상.html("추가할 태그 자열")

여러개의 노드를 추가하는 방법은 2가지가 있습니다.

append()를 이용하는 것 아니면 html()을 이용하는 것 입니다.

아래 예제는 appendLi는 append()를 htmlLI는 html()을 이용하여 노드를 추가하고 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <script>
        $(document).ready(function() {
            $("#appendLi").click(function() {
                var gridHtml = '';
                
                for(var i=0; i < 5; i++) {
                    gridHtml += '<li>menu' + (i+1) + '</li>\n';
                }
                
                $("#ulTag").append(gridHtml);
            });
        });
        
        $(document).ready(function() {
            $("#htmlLi").click(function() {
                var gridHtml = '';
                
                for(var i=0; i < 5; i++) {
                    gridHtml += '<li>menu' + (i+1) + '</li>\n';
                }
                
                $("#ulTag").html(gridHtml);
            });
        });
    </script>
    
    <div class="container">
        <input type="button" id="appendLi" value="append"/>
        <input type="button" id="htmlLi" value="html"/>
        <ul id="ulTag">
        </ul>
    </div>
</body>

append()와 html()을 사용하여 노드를 추가할 수 있지만 차이가 분명히 있습니다.

html()로 추가를 하게 되면 대상안의 태그가 지워지고 새로 추가된 노드가 채워지기 때문에 여러번 클릭해도 결과는 똑같습니다. 하지만 append()는 비워진 대상안에 노드가 뒤로 추가됩니다. 또한 대량으로 노드를 추가해야 하는 경우 여러 노드 정보를 하나의 문자열로 만들어 처리하는 html()을 사용하는 것이 효율적이며 빠릅니다.

노드의 자식을 제거하기

1
$(대상).html("");

자식 노드를 지울 때 children()을 이용하여 자식 노드를 지울 수 있지만 html()을 이용하면 자손 및 자식 노드를 아주 쉽게 제거할 수 있습니다.

아래 예제처럼 remove()메서드를 사용할 수 있지만 remove()의 경우 메서드 내부에서 루프를 돌며 노드 하나씩 삭제하기 때문에 html()을 사용하는 것이 더 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
    <script>
        $(document).ready(function() {
            $("#removeLi").click(function() {
                $("#ulTag").children().remove();
            });
        });
        
        $(document).ready(function() {
            $("#htmlLi").click(function() {
                $("#ulTag").html("");
            });
        });
    </script>
    
    <div class="container">
        <input type="button" id="removeLi" value="removeLi"/>
        <input type="button" id="htmlLi" value="htmlLi"/>
        <ul id="ulTag">
            <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>
    </div>
</body>

저작자표시 비영리

'jQuery' 카테고리의 다른 글

jQuery 속성 다루기 (0)	2018.07.19
jQuery 스타일 다루기 (0)	2018.07.18
jQuery 노드를 생성/추가/삭제/이동 하기 (0)	2018.07.17
jQuery 선택자 다루기 (0)	2018.07.17
jQuery 선택자(자식, 부모, 형제) (2)	2018.07.17

KTKO 개발 블로그와 여행 일기