[JS] 문서 수정하기

문서 수정

노드 생성

• document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다.
• document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음)
• element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다.

 

노드 삽입, 삭제

• node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입
• node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입
• node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입
• node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입
• node.replaceWith(노드나 문자열) : node를 노드나 문자열로 대체
• node.remove() : node를 제거

 

li (텍스트 노드가 있는) 노드 생성

<button onclick="test1();">실행확인</button>
    <ul id="list">
        <li>기존 목록1</li>
        <li>기존 목록2</li>
        <li>기존 목록3</li>
    </ul>
    <script>
        function test1(){
            let list = document.getElementById("list");

            // list의 앞 뒤에 문자열 삽입
            list.before("before");
            list.after("after");

            // li 노드 생성
            let newList1 = document.createElement("li");
            let newList2 = document.createElement("li");

            // 각 노드의 내부 텍스트 설정
            let text = document.createTextNode("새로운 목록1");
            newList1.append(text);  //<li>새로운 목록1</li>
            newList2.innerHTML = "새로운 목록2";

            // list의 마지막 항목/첫 항목으로 삽입
            list.append(newList1);
            list.prepend(newList2);
        }
    </script>

 

이미지(텍스트 노드가 없는) 노드 생성

<button onclick="test2();">실행확인</button>
    <div id="area2" class="area"></div>
    <script>
        function test2(){
            // img 노드 생성
            let imgTest = document.createElement('img');

            // 속성 지정
            imgTest.src = "resources/images/top_logo.jpg";
            imgTest.width = "200";
            imgTest.height = "100";
            document.getElementById('area2').append(imgTest);
        }
    </script>

 

노드 삭제

<button onclick="test3();">맨 앞 이미지 삭제</button>
    <script>
        function test3(){
            // 삭제 할 img 노드 찾기 (img 노드 중 첫 번째 리턴)
            let img = document.querySelector('img');

            // 존재할 경우 (null이 아닌 경우) 삭제
            if(img != null)
                img.remove();
        }
    </script>

 

노드 복제

<button onclick="test4();">실행 확인</button><br>
    <ul class="copy">
        ul 영역
        <li>li 영역</li>
    </ul>
    <script>
        function test4(){
            let ul = document.querySelector(".copy");

            let cloneFalse = ul.cloneNode(false);
            let cloneTrue = ul.cloneNode(true);

            ul.before(cloneFalse);
            ul.after(cloneTrue);
        }
    </script>

 

노드 대체

<button onclick="test5();">실행확인</button>
    <script>
        function test5(){
            // 대체할 노드 찾기 (img 태그 중 첫 번째 리턴)
            let img = document.querySelector("img");

            // 존재할 경우(null이 아닌 경우) 대체
            if(img != null)
                img.replaceWith("<b>이미지가 있던 곳</b>");
                // => 태그가 아닌 문자열로 인식
        }
    </script>