[JavaScript] innerHTML / innerHTML과 append()의 비교

티스토리 뷰

development/html javascript CSS

[JavaScript] innerHTML / innerHTML과 append()의 비교

Happyoon ~ 2021. 10. 14. 17:52

728x90

innerHTML은 HTML의 요소로 삽입하는 방법 중 하나이다.

다음 예제를 살펴보자.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step08_etc.html</title>
</head>
<body>
    <h1>innerText vs innerHTML</h1>
    <div id="one">
        hello
    </div>
    
    <div id="two">

    </div>
    <button id ="addBtn">추가하기</button>
    <div id ="three">

    </div>
    <script>
        
        //대입한 문자열을 html 형식으로 해석해서 자식 요소로 두기
        document.querySelector("#one").innerText = "<a href='https://daum.net'>daum</a>";
        //HTML 속성으로 들어감 
        document.querySelector("#two").innerHTML = "<a href='https://daum.net'>daum</a>";
    
        document.querySelector("#addBtn").addEventListener("click",function(){
            //클릭 여러번 해도 한번만 나옴. 계속 덮어쓰기 되기 때문
            document.querySelector("#three").innerHTML = "<p>innerHTML로 추가된 p요소</p>";
            document.querySelector("#three").append = "<p>append로 추가된 p요소</p>";
        });
    </script>
</body>
</html>

결과

코드를 뜯어 살펴보자.

1) innerText와 innerHTML의 비교

//대입한 문자열을 html 형식으로 해석해서 자식 요소로 두기
document.querySelector("#one").innerText = "<a href='https://daum.net'>daum</a>";
//HTML 속성으로 들어감 
document.querySelector("#two").innerHTML = "<a href='https://daum.net'>daum</a>";

이 부분에서의 결과물은 다음과 같다.

보다시피 innerText로 한 것은 문자열로, innerHTML로 한 것은 링크로 나타나는 모습이다.

여기서, innerHTML로 하면 "<a href = "https://daum.net'>daum</a>" 부분이 HTML 요소로 해석됨으로 확인할 수 있다.

2) innerHTML과 append의 비교

document.querySelector("#addBtn").addEventListener("click",function(){
	//클릭 여러번 해도 한번만 나옴. 계속 덮어쓰기 되기 때문
	document.querySelector("#three").innerHTML = "<p>innerHTML로 추가된 p요소</p>";
	document.querySelector("#three").append = "<p>append로 추가된 p요소</p>";
});

위 코드의 결과물은 다음과 같다.

보다시피, append를 했을 때는 문자열이 나오지 않는 모습을 볼 수 있다.

이유는,

(중요!!★)

그 이유는 append는 함수인데 위에서는 용법이 아예 잘못 되었기 때문이다.

또한, 한가지 더 눈여겨볼 점은 다른 예제와 달리 위의 결과값이 클릭을 여러번 하더라도 한번만 나온다는 점인데, 그 이유는 innerHTML이 누를 때마다 수행되면 내용이 덮어써지기 때문이다.

본 예제에서는 확인할 수 없지만 굳이 innerHTML을 공부하고 사용하는 이유는, 동적으로 요소를 삽입할 수 있기 때문이다.

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] append() (0)	2021.10.15
[JavaScript] insertAdjacentHTML()과 insertAdjacentElement(), append()의 쓰임 비교!! (0)	2021.10.15
[CSS] cursor, hover (0)	2021.10.14
[JavaScript] this (0)	2021.10.14
[JavaScript] 요소 삽입 방법 / append(), beforebegin, afterbegin, beforeend, afterend / insertAdjacentElement() (0)	2021.10.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

yoon's Devlog

티스토리 뷰