[javascript] step07. innerHTML

step07. innerHTML

    <h1>.innerHTML 사용하기</h1>
    <div id="one">

    </div>
    <div id="two">

    </div>
    <script>
        // html 형식의 문자열을 담고있는 변수
        let content = "<a href='https://daum.net'>daum</a>";
        
        // .innerText는 string을 내용 그대로 출력
        document.querySelector("#one").innerText = content;
        // .innerHTML은 html 해석 규칙에 맞게 해석해서 UI에 출력
        document.querySelector("#two").innerHTML = content;
    </script>

innerText는 해당하는 문자열을 내용 그대로 출력하지만, innerHTML은 html 해석에 맞게 해석해서 출력해준다.

 

 

step07. example

    <input type="text" id="inputMsg">
    <button id="addBtn">추가</button>
    <ul id="msgList">

    </ul>
    <script>
        document.querySelector("#addBtn").addEventListener("click", function(){
            // 1. 입력한 string을 읽어온다.
            const msg = document.querySelector("#inputMsg").value;
            // 2. ul 요소에 출력된 기존의 html 형식의 string을 읽어온다.
            let postContent = document.querySelector("#msgList").innerHTML;
            // 3. 입력한 문자열을 li 요소 안에 출력 후
            const li = "<li>" + msg + "</li>";
            // const li = `<li>$msg</li>`;
            // 4. 기존에 출력된 내용에 li의 내용을 합친다.
            postContent = postContent + li;
            // postContent += li;
            //5. 합친 내용을 html 형식으로 해석시킨다.
            //document.querySelector("#msgList").append(li);
            document.querySelector("#msgList").innerHTML = postContent;
        });
    </script>

1. 문자열이 담긴 변수를 더해서 해당 요소를 추가할 수도 있다.
2. 문자열 대신 back tick ` ` 을 이용해서 해당 요소를 추가할 수도 있다.
3. 이런 방식으로 요소를 만드는 것보다 createElement 함수를 이용해서 만드는 것이 더 나아보인다고 말했으나, 가끔씩은 사용한다고 말했다.

 

참고

 

 

 

 

 

debug를 할 때, web browser 검사 sources tab에서 break point를 걸어서 확인할 수 있다. 활용 가치가 높다.

 

 

 

여기까지 html의 기초와 javascript의 기초가 끝났다. javascript 심화는 일단 진도를 나가다가 필요할 때 할 예정이랬다.

이제 css 기초를 배워본다.