Java Script

[JS] INSERT

웨일파도 2023. 4. 13. 13:09
반응형
    function append() {
        let list = document.getElementById("list");
        let java = document.getElementById("javas");
        list.appendChild(java); 
    }
    // appendChild() : 변수 'list'의 마지막 요소로 새로운 자식 노드를 추가

      function insert() {
        let list = document.getElementById("list");
        let java = document.getElementById("javas");
        let ins = document.getElementById("ins");
        list.insertBefore(java,ins);
      }  
    //  부모노드.insertBefore(삽입할 노드, 기준 점 노드);

    function insertTxt() {
        let txt = document.getElementById("javas").firstChild;
        txt.insertData(7, "정말어렵다");
    } 
    // insertData(index,"text") : index 위치에 text 값 추가
    
        function insert1() {
        let txt = document.getElementById("txt");
        let insertNode = document.createElement("p");
        insertNode.innerHTML = "추가된 노드";
        document.body.insertBefore(insertNode,txt);
    }
    // ★ createElement(노드) 중요, 많이 씀
    
    function insert2() {
        let txt = document.getElementById("txt");
        let style = document.createAttribute("style");
        style.value = "color: red";
        
        txt.setAttributeNode(style);    
    }
    //  ★ x.setAttributeNode(속성)

    function insert() {
        let txt2 = document.getElementById("txt2");
        let text = document.createTextNode("new Text");
        console.log(text);
        txt2.append(text);
    }
    // createTextNode("text")
반응형

'Java Script' 카테고리의 다른 글

[JS] #MAP #LIST #0414수업 #1교시  (0) 2023.04.14
[JS] DELETE  (0) 2023.04.13
[JS] media 쿼리 / 화면 사이즈에 따라 카드 구성 다르게 하기  (0) 2023.04.13
[JS] DOM - getElementsByTagName  (0) 2023.04.12
[JS] eventListener  (0) 2023.04.12