텍스트 노드를 동적으로 추가/삭제

document 객체의 기능 : 문서의 자식 노드 객체 생성

 

Element와 Text 를 자주 사용한다.

 

Element **                  createElement(in DOMString tagName)

                                                      raises(DOMException);

DocumentFragment  createDocumentFragment();

Text      **              createTextNode(in DOMString data);

Comment               createComment(in DOMString data);

CDATASection         createCDATASection(in DOMString data)   

                                            raises(DOMException);

ProcessingInstruction createProcessingInstruction(in DOMString target, in DOMString data)

                                            raises(DOMException);

Attr                       createAttribute(in DOMString name)

                                            raises(DOMException);

EntityReference       createEntityReference(in DOMString name)

                                            raises(DOMException);

NodeList               getElementsByTagName(in DOMString tagname);

 

-----------------------------------------------------------------------------------------------------------------------------------노드 조작하기　＝ 객체라고도 표현 한다. (추가 , 삭제 를 한다고 보면 된다.)

Node                   insertBefore(in Node newChild, in Node refChild)

                                       raises(DOMException);

Node                   replaceChild(in Node newChild, in Node oldChild)

                                       raises(DOMException);

Node                   removeChild(in Node oldChild)

                                       raises(DOMException);

Node                   appendChild(in Node newChild)

                                       raises(DOMException);

Boolean                hasChildNodes();

 

Node                   cloneNode(in boolean deep);

 

append : 추가 하다 라는 뜻이다.

-----------------------------------------------------------------------------------------------------------------------------------

 

1. 텍스트 노드 생성

   var txt = document.createTextNode("안녕하세요");

2. 텍스트 노드를 추가할 엘리먼트 노드 선택

   var div1 = document.getElementById("div1");

3. 엘리먼트 노드에 텍스트 노드 추가하기

   div1.appendChild(txt);

                                                                                                    #document

                                                                                                          |

                                                                                                        body

                                                                                               |                    |

                                                                                             div                   p

                                                                                      |                |

                                                                                   font            input           안녕하세요

-----------------------------------------------------------------------------------------------------------------------------------

<section id="section6">

                <h1>EX-6 노드조작 : 메뉴추가(createTextNode, Element) </h1>

                <div>

                   <input  class="title-input" name="title" />

                   <input type="button" class="add-button" value="추가" />

                   <input type="button" class="del-button" value="삭제" />

                <div>

                 <ul class="menu-list">

                       <li><a>aaa</a></li>   -> 이런 형식이 정상이다.

                       <li><a>bbb</a></li>

                         "aaa"

                 </div>

            </section>

            <hr />

 

// EX 6 : 엘리먼트 노드의 속성 CSS 속성 변경

window.addEventListener("load", function(){

   

    var section6 = document.querySelector("#section6");

 

    var titleInput = section6.querySelector(".title-input");

    var menuListDiv = section6.querySelector(".menu-list");

    var addButton = section6.querySelector(".add-button");

    var delButton = section6.querySelector(".del-button");

 

    addButton.onclick = function(){

        var title = titleInput.value;

        var txtNode = document.createTextNode(title);

        menuListDiv.appendChild(txtNode);

    };

    delButton.onclick = function(){

        var txtNode = menuListDiv.childNodes[0];

        menuListDiv.removeChild(txtNode

 

한번에 삭제 가 되지 않는데 안되는 이유는 "aaa" 앞에 보이지 않는 화이트 스페이스가 있기 때문이다.

"aaa""bbb""ccc" 이런식으로 사용하면 안된다.

구분을 하기 위해서는 Mark up언어를 사용해줘요 한다.

<a> </a>);

    };

});

 

 

출처 : 자바스크립트 DOM 프로그래밍 32강 - 텍스트 노드를 동적으로 추가/삭제