자바스크립트 HTML 표시내용 변경 innerHTML 사용 방법

2023.08.09

자바스크립트로 무언가 처리를 하고 그 결과에 따라 화면상에 문자열을 변경하고 싶은 경우가 있습니다.

이런 경우에는 innerHTML 프로퍼티를 사용해 표시하고 싶은 내용으로 변경할 수 있습니다.

innerHTML 프로퍼티를 사용해 표시내용을 변경하는 방법을 알아보겠습니다.

 

innerHTML

우선 innerHTML이 무엇인지 살펴보겠습니다.

innerHTML은 HTML요소의 내용을 ㄹ변경하고 싶은 경우에 사용하는 Element오브젝트의 프로퍼티입니다.

예를 들어 div요소나 span요소에 작성한 동적으로 내용을 변경할 때 사용할 수 있습니다.

innerHTML 프로퍼티 사용 방법은 아래와 같습니다.

document.getElementById(“id 이름”).innerHTML = 변경하고 싶은 내용

 

innerHTML을 사용하기 위해서는 HTML요소에 id 이름을 지정해야 합니다.

 

문자열 변경

innerHTML 프로퍼티를 사용해 문자열을 변경하는 예제를 보겠습니다.

아래 샘플의 버튼을 클릭하면 문자열이 변경됩니다.

안녕하세요

샘플 소스를 보겠습니다.

<script type="text/javascript">

// 버튼 클릭 이벤트
function innerSample1() {
    // span 문자열 변경
    document.getElementById("test1").innerHTML = "Hello！";
}

</script>

<div style="background-color : #CCC;">
    <form>
        <span id="test1" style="font-size: 120%;">안녕하세요</span>
        <br/>
        <br/>
        <input type="button" value="버튼" onClick="innerSample1()">
    </form>
</div>

 

span 요소에 안녕하세요 라는 문자열을 표시하고 있습니다.

span 요소에는 test1이라는 id 이름을 지정했습니다.

버튼에는 onClick 이벤트를 설정해 innerSample1 함수를 호출하고 있습니다.

innerSample1 함수에서는 id 이름 test1에 문자열을 Hello！로 변경하도록 설정하고 있습니다.

 

 

이번에는 문자열 색상도 같이 변경하는 방법을 보겠습니다.

innerHTML에는 문자열뿐만이 아닌 HTML요소를 지정할 수 있습니다.

아래 버튼을 클릭하면 문자열과 색상이 변경이 됩니다.

안녕하세요 

<script type="text/javascript">

// 버튼 클릭 이벤트
function innerSample2() {
    // span 문자열 변경
    document.getElementById("test2").innerHTML = "<span style='color: red;'>Hello！</span>";
}

</script>

<div style="background-color : #CCC;">
    <form>
        <span id="test2" style="font-size: 120%;">안녕하세요</span>
        <br/>
        <br/>
        <input type="button" value="버튼" onClick="innerSample2()">
    </form>
</div>

 

이번 샘플에서도 버튼을 클릭하면 안녕하세요 라는 문자열을 Hello！로 변경하고 있습니다.

문자열이 변경되면서 색상은 빨간색으로 변했습니다.

기본에 있던 span 요소에 색상 스타일을 변경한 것은 아닙니다.

span 요소에 빨간색 스타일을 적용시간 span 요소가 추가된 것입니다.

이렇게 새로운 요소를 추가하는 방법을 사용하면 span 요소뿐만 아니라 다른 HTML 요소들도 추가할 수 있습니다.

innerHTML을 사용해 문자열을 변경하는 방법을 알아봤습니다.

자바스크립트와 innerHTML을 사용하면 동적인 화면을 만드는데 많은 도움이 됩니다.

댓글