[javascript] step06. createElement

step06. - 01~02. createElement

    <h1>문서 객체를 javascript로 만들기</h1>
    <button id="addBtn">추가하기</button>
    <div id="one">

    </div>
    <script>
        /*
            추가하기 버튼을 눌렀을 때
            <p>안녕하세요</p> 형식의 요소를 동적으로 만들어서
            id가 one인 div에 추가되도록 해보세요.
        */
        document.querySelector("#addBtn").addEventListener("click", function(){
            let p = document.createElement("p");
            p.innerText = "안녕하세요";
            document.querySelector("#one").append(p);
        })

        // 속성 추가
        let img = document.createElement("img");
        img.setAttribute("src", "images/kim1.png")
    </script>

createElement : 원하는 시점에, 원하는 객체를 만들어서 넣을 때 사용한다. console 창에서 직접 작성해보면 <div> 요소 안에 없던 <p> 요소가 생긴다. 이렇게 문서 객체를 동적으로 만들 때 사용한다. 하지만 변수에 넣어주지 않으면 그저 버려질 뿐이라고 했다.
createElement로 만들어진 요소는 원하는 객체에 .append(xxx)를 통해서 추가할 수 있다.
querySelector는 document의 기능이고, append나 addEventListener는 참조해온 것에 해당하는 객체의 기능이다.

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="addBtn">추가</button>
    <div id="wrapper">
        <div class="box">box</div>
        <div class="box">box</div>
        <div class="box">box</div>
    </div>
    <script>
        document.querySelector("#addBtn").addEventListener("click", function(){
            const newDiv = document.createElement("div");
            newDiv.innerText="box";
            // class="box" 속성 추가하기
            newDiv.setAttribute("class", "box");
            // 새로 만든 div에도 eventlistener function 등록
            newDiv.addEventListener("click", function(){
                this.remove();
            });
            document.querySelector("#wrapper").append(newDiv);
        });
        // class attribute의 value가 box인 element의 reference value를 모두 찾아서
        // array에 담아오기
        const divs = document.querySelectorAll(".box");
        //divs.append(newDiv);
        for(i=0; i<divs.length; i++){
            divs[i].addEventListener("click", function(){
                console.log("clicked!");
                // click event가 일어난 바로 그(this) element를 삭제
                this.remove();
            });
        
        }
    </script>

setAttribute("a", "b") : 만든 요소에 속성을 추가하는 함수. value가 "b"인 "a" 속성을 추가한다.
remove( ) : 해당 참조값에 해당하는 요소를 제거한다.
element.속성이름 = value; 의 작성도 가능하다.
(ex - element.innerText="test";)
cursor: pointer; : 손가락 모양의 커서를 만드는 css이다.

step06 - example

    <input type="text" id="inputName" placeholder = "이름 입력...">
    <input type="text" id="inputAddr" placeholder = "주소 입력..."><br>
    <button id="saveBtn">array에 저장하기</button>
    <button id="showBtn">저장된 내용을 table에 출력하기</button>
    <h1>회원 목록입니다</h1>
    <table border="1">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody id="tbid">
        
        </tbody>
    </table>
    <script>
        let ids = [];
        let addrs = [];
        let numbers =[];
        document.querySelector("#saveBtn").addEventListener("click", function(){
            obj = {};
            id = document.querySelector("#inputName").value;
            addr = document.querySelector("#inputAddr").value;
            obj.id = id;
            obj.addr = addr;
            obj.number = "";
            ids.push(obj);
            for(let i=0; i<ids.length; i++){
                number = i+1;
                ids[i].number = i+1;
            }          
        })
        document.querySelector("#showBtn").addEventListener("click", function(){
            let tr=document.createElement("tr");
            for(let i=0; i<ids.length; i++){
                let tr=document.createElement("tr");
                let td1=document.createElement("td");
                let td2=document.createElement("td");
                let td3=document.createElement("td");
                td1.innerText = ids[i].number;
                td2.innerText = ids[i].id;
                td3.innerText = ids[i].addr;
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
                let tbody=document.querySelector("#tbid");
                tbody.append(tr);
            }   
        })

다음은 같은 내용을 선생님께서 작성한 것이다.

        /* 선생님
        // 페이지 loading시에 빈 array를 미리 준비하기
        const members=[];
        let num=0;
        // 버튼에 이벤트 리스너 함수 등록하기
        document.querySelector("#saveBtn").addEventListener("click", function(){
            // 1. 입력한 이름을 읽어온다.
            const name = document.querySelector("#inputName").value;
            // 2. 입력한 주소를 읽어온다.
            const addr = document.querySelector("#inputAddr").value;
            // 3. 읽어온 한 명의 회원정보를 object에 저장한다.
            // 번호 증가시키키
            num++;
            obj = {name:name, address:address, number:num}
            // 4. object의 참조값을 array에 저장한다.
            members.push(obj);
        })
        document.querySelector("#saveBtn").addEventListener("click", function(){
            // 내용초기화
            // document.querySelector("#tbody").innerText="";
            // 반복문 돌면서
            //for(let i=0; i<members.length; i++){
            for(let i in members){
                let tmp.members[i];
                // object에 있는 정보를 이용해서 td 3개를 만들어서
                const td1=document.createElement("td");
                const td2=document.createElement("td");
                const td3=document.createElement("td");
                
                // 위에서 만든 td의 innerText 넣어주기
                td1.innerText=tmp.num;
                td2.innerText=tmp.name;
                td3.innerText=tmp["addr"];

                // tr 요소를 만들어서
                const tr = document.createElement("tr");
                // tr 요소에 추가하고
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
                // tr을 tbody에 추가
                document.querySelector("#tbody").append(tr);
            }
        }) 
        */

for loop문을 쓰는 또 다른 방법이 있다.

for(let i in members){
    tmp.num
    tmp.name
  	...
}

이와 같이 받아서, tmp(꼭 이것이 아니어도 됨) 로 받아서 해당 data를 사용할 수 있다. 이때는 members 배열의 길이만큼 배열에 대한 loop를 돌면서 각 차수에 대한 data 자체를 tmp로 받아버린 것이다.

step06 - quiz

    <button id="makeBtn">만들기</button>
    <div id="wrapper">
        <h1>정보를 입력하세요</h1>
        <input type="text" id="info" placeholder="입력...">
        <button id="addBtn">추가</button>
        <br>
        <img src="images/kim1.png" alt="김구라 이미지">
        <br>
        <ul class="my-class">
            <li>하나</li>
            <li>둘</li>
            <li>셋</li>
        </ul>
    </div>
    <script>
        document.querySelector("#makeBtn").addEventListener("click", function(){
            div = document.querySelector("#wrapper");
            h1 = document.createElement("h1");
            h1.innerText="정보를 입력하세요.";
            //div.append(h1);

            input = document.createElement("input");         
            input.setAttribute("id", "info");
            input.setAttribute("placeholder", "입력...");
            //div.append(input);

            btn = document.createElement("button");
            btn.setAttribute("id", "addBtn");
            btn.innerText = "추가"
            //div.append(btn);

            br1 = document.createElement("br");
            //div.append(br1);

            img = document.createElement("img");
            img.setAttribute("src", "images/kim1.png");
            img.setAttribute("alt", "김구라 이미지");
            //div.append(img);

            //br = document.createElement("br");
            br2 = document.createElement("br");
            //div.append(br2);

            ul = document.createElement("ul");
            ul.setAttribute("class", "my-class");
            li1 = document.createElement("li");
            li2 = document.createElement("li");
            li3 = document.createElement("li");
            li1.innerText="하나";
            li2.innerText="둘";
            li3.innerText="셋";
            ul.append(li1, li2, li3);

            //ul.append(li2);
            //ul.append(li3);
            //div.append(ul);
            div.append(h1, input,btn, br1, img, br2, ul);
        });
    </script>

'뒷북 정리 (국비 교육) > javascript' 카테고리의 다른 글

[javascript] step07. innerHTML (0)	2021.12.13
[javascript] Dragon Flight 만들기 (21.04.14 ~ 21.04.16) (0)	2021.12.11
[javascript] step05. operator (연산자) : 증감 연산자 / example.3~4 (0)	2021.12.09
[javascript] step05. operator (연산자) : 비교 연산자 (0)	2021.12.09
[javascript] step05. operator (연산자) : 대입 연산자 (0)	2021.12.09