[JS] 로딩이 될때 요소의 텍스트를 변경하는 방법

HTML 안에 있는 특정 요소의 텍스트를 변경하는 것이 아닌, 스크립트로 로드가 된 후에 요소가 등장하고 그 안에 텍스트를 JS를 통해 변경해야할 때는 단순히 .innerHTML 속성을 통해 변경이 불가능 합니다. 오늘은 로딩이 될때 요소의 텍스트를 변경하는 방법에 대해 알아보도록 하겠습니다.

로딩이 될 때 요소의 텍스트를 변경하는 방법

간단하게 말해서 값을 설정하려는 시점에 요소가 존재하지 않다면 특정 요소, 예를 들어 <h1>가 DOM(Document Object Model)에 추가된 후에 변경 메서드를 호출해야 합니다.

 

이 스크립트 <script> 태그를 문서가 로드될 때 호출되어야 하는 함수에 코드를 추가할 수 있습니다.

window.onload = function() {
    /* 로직 추가 */
}

위를 코드를 예로 들어 사용해보면 아래와 같습니다.

<script type="text/javascript">
    window.onload = function() {
        document.querySelector('.someDivName h1').innerHTML = "서근개발노트";
    }
</script>

<div class="someDivName">
   <h1>누구인가?</h1>
</div>

See the Pen innerHTML onload by 서근 (@seogun95) on CodePen.

 

만약, 웹사이트가 로드 되고 N초 뒤에 .innerHTML을 통해 값을 변경해야 한다면 setTimeout() 메서드를 사용하면 됩니다.

See the Pen innerHTML with setTimeout by 서근 (@seogun95) on CodePen.

 

---

오늘은 이렇게 로딩이 될 때 요소의 텍스트를 변경하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟