Dexter_- 2018. 10. 22. 13:39

728x90

노드의 추가

다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다.

appendChild()
insertBefore()
insertData()

appendChild() 메소드

appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>appendChild() 메소드</h1>
    <h2 id="item">JavaScript</h2>
    <div id="list">
        <p>HTML</p>
        <p>CSS</p>
        <p>JQuery</p>
    </div>
    <button onclick="appendNode()">노드 추가!</button>    
    <script>
        function appendNode() {
            var parent = document.getElementById("list");    // 아이디가 "list"인 요소를 선택함.
            var newItem = document.getElementById("item");    // 아이디가 "item"인 요소를 선택함.
            parent.appendChild(newItem);                    // 해당 요소의 맨 마지막 자식 노드로 추가함.
        }
   </script>
</body>
</html>

실행 결과

appendChild() 메소드

JavaScript

HTML

CSS

JQuery

insertBefore() 메소드

insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가한다.

insertBefore() 메소드의 원형은 다음과 같다.

원형

부모노드.insertBefore(새로운 자식 노드, 기준 자식 노드);

새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달한다.
기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가된다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>insertBefore() 메소드</h1>
    <h2 id="item">JavaScript</h2>
    <div id="list">
        <p>HTML</p>
        <p id="criteria">CSS</p>
        <p>JQuery</p>
    </div>
    <button onclick="appendNode()">노드 추가!</button>
    
    <script>
        function appendNode() {
            var parent = document.getElementById("list");            // 아이디가 "list"인 요소를 선택함.
            var criteriaItem = document.getElementById("criteria");    // 아이디가 "criteria"인 요소를 선택함.
            var newItem = document.getElementById("item");            // 아이디가 "item"인 요소를 선택함.
            parent.insertBefore(newItem, criteriaItem);                // 해당 노드를 기준이 되는 자식 노드의 바로 앞에 추가함.
        }
   </script>
</body>
</html>

실행 결과

insertBefore() 메소드

JavaScript

HTML

CSS

JQuery

💡 TIP ? 기준 자식 노드에 null 값을 전달하면 새로운 노드는 자식 노드 리스트의 맨 마지막 노드로 추가된다. 즉, appendChild() 메소드와 완전히 같은 동작을 하게 된다.

insertData() 메소드

insertData() 메소드는 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가한다.

insertDate() 메소드의 원형은 다음과 같다.

원형

텍스트노드.iinsertData(오프셋, 새로운 데이터);

오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달한다.
새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>insertData() 메소드</h1>
    <p id="text">지금 시간은 오후 3시입니다.</p>
    <button onclick="appendText()">텍스트 추가!</button>

    <script>
        var text = document.getElementById("text").firstChild;    // 아이디가 "text"인 요소의 텍스트 노드를 선택함.
        function appendText() {
            text.insertData(6, " 나른한 ");    // 텍스트 노드의 6번째 문자부터 " 나른한 "이란 텍스트를 추가함.
        }
   </script>
</body>
</html>

실행 결과

insertData() 메소드

지금 시간은 오후 3시입니다.

노드의 생성

생성할 노드의 종류에 따라 다음과 같은 메소드를 사용할 수 있다.

createElement()
createAttribute()
createTextNode()

요소 노드의 생성

createElement() 메소드를 사용하여 새로운 요소 노드를 만들 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>요소 노드의 생성</h1>
    <p id="text">새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.</p>
    <button onclick="createNode()">요소 노드 생성!</button>

    <script>
        function createNode() {
            var criteriaNode = document.getElementById("text");    // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.
            var newNode = document.createElement("p");            // 새로운 <p> 요소를 생성함.
            newNode.innerHTML = "새로운 단락입니다.";
            document.body.insertBefore(newNode, criteriaNode);    // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.
        }
   </script>
</body>
</html>

실행 결과

요소 노드의 생성

새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.

속성 노드의 생성

createAttribute() 메소드를 사용하여 새로운 속성 노드를 만들 수 있다.

만약 같은 이름의 속성 노드가 이미 존재하면, 기존의 속성 노드는 새로운 속성 노드로 대체된다.

이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute() 메소드를 사용할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>속성 노드의 생성</h1>
    <p id="text">이 단락에 새로운 속성을 추가할 것입니다.</p>
    <button onclick="createNode()">속성 노드 생성!</button>

    <script>
        function createNode() {
            var text = document.getElementById("text");                // 아이디가 "text"인 요소를 선택함.
            var newAttribute = document.createAttribute("style");    // 새로운 style 속성 노드를 생성함.
            newAttribute.value = "color:red";
            text.setAttributeNode(newAttribute);                    // 해당 요소의 속성 노드로 추가함.
        }
   </script> 
</body>
</html>

실행 결과

속성 노드의 생성

이 단락에 새로운 속성을 추가할 것입니다.

텍스트 노드의 생성

createTextNode() 메소드를 사용하여 새로운 텍스트 노드를 만들 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>텍스트 노드의 생성</h1>
    <button onclick="createNode()">텍스트 노드 생성!</button>
    <p id="text"></p>
    <script>
        function createNode() {
            var elementNode = document.getElementById("text");                // 아이디가 "text"인 요소를 선택함.
            var newText = document.createTextNode("새로운 텍스트에요! ");    // 새로운 텍스트 노드를 생성함.
            elementNode.appendChild(newText);                                // 해당 요소의 자식 노드로 추가함.
        }
   </script>
</body>
</html>

실행 결과

텍스트 노드의 생성

노드의 제거

다음 메소드를 사용하면 특정 노드를 제거할 수 있다.

removeChild()
removeAttribute()

removeChild() 메소드

removeChild() 메소드는 자식 노드 리스트에서 특정 자식 노드를 제거한다.

이 모소드는 성공적으로 노드가 제거되면 제거된 노드를 반환한다.

노드가 제거될 때에는 제거되는 노드의 모든 자식 노드들도 다 같이 제거된다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>removeChild() 메소드</h1>
    <button onclick="remove()">요소 노드 삭제!</button>
    <div id="list">
        <p>HTML</p>
        <p id="item">CSS</p>
        <p>JavaScript</p>
    </div>    
    <script>
        function remove() {
            var parent = document.getElementById("list");        // 아이디가 "list"인 요소를 선택함.
            var removedItem = document.getElementById("item");    // 아이디가 "item"인 요소를 선택함.
            parent.removeChild(removedItem);                    // 지정된 요소를 삭제함.
        }
   </script>
</body>
</html>

실행 결과

removeChild() 메소드

HTML

CSS

JavaScript

removeAttribute() 메소드

removeAttribute() 메소드는 속성의 이름을 이용하여 특정 속성 노드를 제거한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>removeAttribute() 메소드</h1>
    <button onclick="remove()">속성 노드 삭제!</button>
    <p id="text" style="color:red; background-color:lemonchiffon;">이 단락의 속성이 제거될 것입니다.</p>

    <script>
        function remove() {
            var text = document.getElementById("text");        // 아이디가 "text"인 요소를 선택함.
            text.removeAttribute("style");                    // 해당 요소의 "style" 속성을 제거함.
        }
   </script>
</body>
</html>

실행 결과

removeAttribute() 메소드

이 단락의 속성이 제거될 것입니다.

노드의 복제

cloneNode() 메소드를 사용하면 특정 노드를 복제할 수 있다.

cloneNode() 메소드

cloneNode() 메소드는 기존의 존재하는 노드와 똑같은 새로운 노드를 생성하여 반환한다.

cloneNode() 메소드의 원형은 다음과 같다.

원형

복제할노드.cloneNode(자식노드 복제 여부);

자식 노드 복제 여부 : 전달된 값이 true이면 복제되는 노드의 모든 속성 노드와 자식 노드도 같이 복제하며, false이면 속성 노드만 복제하고 자식 노드는 복제하지 않는다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>cloneNode() 메소드</h1>
    <button onclick="cloneElement()">노드 복제!</button>
    <h2 id="item">JavaScript</h2>
    <div id="list">
        <p>HTML</p>
        <p>CSS</p>
        <p>JQuery</p>
    </div>
        
    <script>
        function cloneElement() {
            var parent = document.getElementById("list");            // 아이디가 "list"인 요소를 선택함.
            var originItem = document.getElementById("item");        // 아이디가 "item"인 요소를 선택함.
            parent.appendChild(originItem.cloneNode(true));            // 해당 노드를 복제하여 리스트의 맨 마지막에 추가함.
        }
   </script>
</body>
</html>

실행 결과

cloneNode() 메소드

JavaScript

HTML

CSS

JQuery

노드의 추가

다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다.

appendChild()
insertBefore()
insertData()

appendChild() 메소드

appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>appendChild() 메소드</h1>
    <h2 id="item">JavaScript</h2>
    <div id="list">
        <p>HTML</p>
        <p>CSS</p>
        <p>JQuery</p>
    </div>
    <button onclick="appendNode()">노드 추가!</button>    
    <script>
        function appendNode() {
            var parent = document.getElementById("list");    // 아이디가 "list"인 요소를 선택함.
            var newItem = document.getElementById("item");    // 아이디가 "item"인 요소를 선택함.
            parent.appendChild(newItem);                    // 해당 요소의 맨 마지막 자식 노드로 추가함.
        }
   </script>
</body>
</html>

실행 결과

appendChild() 메소드

JavaScript

HTML

CSS

JQuery

insertBefore() 메소드

insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가한다.

insertBefore() 메소드의 원형은 다음과 같다.

원형

부모노드.insertBefore(새로운 자식 노드, 기준 자식 노드);

새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달한다.
기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가된다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>insertBefore() 메소드</h1>
    <h2 id="item">JavaScript</h2>
    <div id="list">
        <p>HTML</p>
        <p id="criteria">CSS</p>
        <p>JQuery</p>
    </div>
    <button onclick="appendNode()">노드 추가!</button>
    
    <script>
        function appendNode() {
            var parent = document.getElementById("list");            // 아이디가 "list"인 요소를 선택함.
            var criteriaItem = document.getElementById("criteria");    // 아이디가 "criteria"인 요소를 선택함.
            var newItem = document.getElementById("item");            // 아이디가 "item"인 요소를 선택함.
            parent.insertBefore(newItem, criteriaItem);                // 해당 노드를 기준이 되는 자식 노드의 바로 앞에 추가함.
        }
   </script>
</body>
</html>

실행 결과

insertBefore() 메소드

JavaScript

HTML

CSS

JQuery

💡 TIP ? 기준 자식 노드에 null 값을 전달하면 새로운 노드는 자식 노드 리스트의 맨 마지막 노드로 추가된다. 즉, appendChild() 메소드와 완전히 같은 동작을 하게 된다.

insertData() 메소드

insertData() 메소드는 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가한다.

insertDate() 메소드의 원형은 다음과 같다.

원형

텍스트노드.iinsertData(오프셋, 새로운 데이터);

오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달한다.
새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>insertData() 메소드</h1>
    <p id="text">지금 시간은 오후 3시입니다.</p>
    <button onclick="appendText()">텍스트 추가!</button>

    <script>
        var text = document.getElementById("text").firstChild;    // 아이디가 "text"인 요소의 텍스트 노드를 선택함.
        function appendText() {
            text.insertData(6, " 나른한 ");    // 텍스트 노드의 6번째 문자부터 " 나른한 "이란 텍스트를 추가함.
        }
   </script>
</body>
</html>

실행 결과

insertData() 메소드

지금 시간은 오후 3시입니다.

노드의 생성

생성할 노드의 종류에 따라 다음과 같은 메소드를 사용할 수 있다.

createElement()
createAttribute()
createTextNode()

요소 노드의 생성

createElement() 메소드를 사용하여 새로운 요소 노드를 만들 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>요소 노드의 생성</h1>
    <p id="text">새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.</p>
    <button onclick="createNode()">요소 노드 생성!</button>

    <script>
        function createNode() {
            var criteriaNode = document.getElementById("text");    // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.
            var newNode = document.createElement("p");            // 새로운 <p> 요소를 생성함.
            newNode.innerHTML = "새로운 단락입니다.";
            document.body.insertBefore(newNode, criteriaNode);    // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.
        }
   </script>
</body>
</html>

실행 결과

요소 노드의 생성

새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.

속성 노드의 생성

createAttribute() 메소드를 사용하여 새로운 속성 노드를 만들 수 있다.

만약 같은 이름의 속성 노드가 이미 존재하면, 기존의 속성 노드는 새로운 속성 노드로 대체된다.

이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute() 메소드를 사용할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>속성 노드의 생성</h1>
    <p id="text">이 단락에 새로운 속성을 추가할 것입니다.</p>
    <button onclick="createNode()">속성 노드 생성!</button>

    <script>
        function createNode() {
            var text = document.getElementById("text");                // 아이디가 "text"인 요소를 선택함.
            var newAttribute = document.createAttribute("style");    // 새로운 style 속성 노드를 생성함.
            newAttribute.value = "color:red";
            text.setAttributeNode(newAttribute);                    // 해당 요소의 속성 노드로 추가함.
        }
   </script> 
</body>
</html>

실행 결과

속성 노드의 생성

이 단락에 새로운 속성을 추가할 것입니다.

텍스트 노드의 생성

createTextNode() 메소드를 사용하여 새로운 텍스트 노드를 만들 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>텍스트 노드의 생성</h1>
    <button onclick="createNode()">텍스트 노드 생성!</button>
    <p id="text"></p>
    <script>
        function createNode() {
            var elementNode = document.getElementById("text");                // 아이디가 "text"인 요소를 선택함.
            var newText = document.createTextNode("새로운 텍스트에요! ");    // 새로운 텍스트 노드를 생성함.
            elementNode.appendChild(newText);                                // 해당 요소의 자식 노드로 추가함.
        }
   </script>
</body>
</html>

실행 결과

텍스트 노드의 생성

노드의 제거

다음 메소드를 사용하면 특정 노드를 제거할 수 있다.

removeChild()
removeAttribute()

removeChild() 메소드

removeChild() 메소드는 자식 노드 리스트에서 특정 자식 노드를 제거한다.

이 모소드는 성공적으로 노드가 제거되면 제거된 노드를 반환한다.

노드가 제거될 때에는 제거되는 노드의 모든 자식 노드들도 다 같이 제거된다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>removeChild() 메소드</h1>
    <button onclick="remove()">요소 노드 삭제!</button>
    <div id="list">
        <p>HTML</p>
        <p id="item">CSS</p>
        <p>JavaScript</p>
    </div>    
    <script>
        function remove() {
            var parent = document.getElementById("list");        // 아이디가 "list"인 요소를 선택함.
            var removedItem = document.getElementById("item");    // 아이디가 "item"인 요소를 선택함.
            parent.removeChild(removedItem);                    // 지정된 요소를 삭제함.
        }
   </script>
</body>
</html>

실행 결과

removeChild() 메소드

HTML

CSS

JavaScript

removeAttribute() 메소드

removeAttribute() 메소드는 속성의 이름을 이용하여 특정 속성 노드를 제거한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>removeAttribute() 메소드</h1>
    <button onclick="remove()">속성 노드 삭제!</button>
    <p id="text" style="color:red; background-color:lemonchiffon;">이 단락의 속성이 제거될 것입니다.</p>

    <script>
        function remove() {
            var text = document.getElementById("text");        // 아이디가 "text"인 요소를 선택함.
            text.removeAttribute("style");                    // 해당 요소의 "style" 속성을 제거함.
        }
   </script>
</body>
</html>

실행 결과

removeAttribute() 메소드

이 단락의 속성이 제거될 것입니다.

노드의 복제

cloneNode() 메소드를 사용하면 특정 노드를 복제할 수 있다.

cloneNode() 메소드

cloneNode() 메소드는 기존의 존재하는 노드와 똑같은 새로운 노드를 생성하여 반환한다.

cloneNode() 메소드의 원형은 다음과 같다.

원형

복제할노드.cloneNode(자식노드 복제 여부);

자식 노드 복제 여부 : 전달된 값이 true이면 복제되는 노드의 모든 속성 노드와 자식 노드도 같이 복제하며, false이면 속성 노드만 복제하고 자식 노드는 복제하지 않는다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Node Manage</title>
</head>
<body>
    <h1>cloneNode() 메소드</h1>
    <button onclick="cloneElement()">노드 복제!</button>
    <h2 id="item">JavaScript</h2>
    <div id="list">
        <p>HTML</p>
        <p>CSS</p>
        <p>JQuery</p>
    </div>
        
    <script>
        function cloneElement() {
            var parent = document.getElementById("list");            // 아이디가 "list"인 요소를 선택함.
            var originItem = document.getElementById("item");        // 아이디가 "item"인 요소를 선택함.
            parent.appendChild(originItem.cloneNode(true));            // 해당 노드를 복제하여 리스트의 맨 마지막에 추가함.
        }
   </script>
</body>
</html>

실행 결과

cloneNode() 메소드

JavaScript

HTML

CSS

JQuery

728x90

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] Window 객체 (0)	2018.10.22
[JavaScript] 노드의 조작 (0)	2018.10.22
[JavaScript] 노드 (0)	2018.10.22
[JavaScript] DOM 요소 (0)	2018.10.22
[JavaScript] DOM / Document 객체 (0)	2018.10.19

노드의 추가

appendChild() 메소드

appendChild() 메소드

JavaScript

insertBefore() 메소드

insertBefore() 메소드

JavaScript

insertData() 메소드

insertData() 메소드

노드의 생성

요소 노드의 생성

요소 노드의 생성

속성 노드의 생성

속성 노드의 생성

텍스트 노드의 생성

텍스트 노드의 생성

노드의 제거

removeChild() 메소드

removeChild() 메소드

removeAttribute() 메소드

removeAttribute() 메소드

노드의 복제

cloneNode() 메소드

cloneNode() 메소드

JavaScript

노드의 추가

appendChild() 메소드

appendChild() 메소드

JavaScript

insertBefore() 메소드

insertBefore() 메소드

JavaScript

insertData() 메소드

insertData() 메소드

노드의 생성

요소 노드의 생성

요소 노드의 생성

속성 노드의 생성

속성 노드의 생성

텍스트 노드의 생성

텍스트 노드의 생성

노드의 제거

removeChild() 메소드

removeChild() 메소드

removeAttribute() 메소드

removeAttribute() 메소드

노드의 복제

cloneNode() 메소드

cloneNode() 메소드

JavaScript

'Language > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바