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을 공부하고 사용하는 이유는, 동적으로 요소를 삽입할 수 있기 때문이다. 

 

반응형