프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

innerHTML() 본문

Javascript

innerHTML()

자라나라나무나무나 2022. 3. 22. 23:13
HTML요소의 내용을 변경하고 싶은 경우에 사용하는 element 오브젝트의 프로퍼티 
ex) div나 span에 동적으로 내용을 변경할 때 사용
document.getElementById("id / class이름").innerHTML = 변경하고 싶은 내용

무조건 html에 id 혹은 class 를 지정해야 한다.

 

HTML

<body>
    <div class="inputbox">
        <input type="text" />
        <input type="submit" value="button" onclick="inputText()"/>
    </div>
    <script src="example.js"></script>
</body>

JS

function inputText() {
    document.querySelector(".inputbox").innerHTML = "Hello!";
}

input에 text를 넣고 난 후 

 

div class inputbox의 태그 자체를 바꾸어 버린다.

저작자표시 비영리 변경금지 (새창열림)

'Javascript' 카테고리의 다른 글

setInterval()  (0) 2022.03.24
innerText()과 innerHTML() 차이점  (0) 2022.03.23
querySelector() / querySelectorAll()  (0) 2022.03.12
getElementById() / getElementsByClassName() / getElementsByTagName()  (0) 2022.03.12
assigned a value but never used 오류  (0) 2022.03.11
'Javascript' Related Articles more
Comments