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

innerText()과 innerHTML() 차이점 본문

Javascript

innerText()과 innerHTML() 차이점

자라나라나무나무나 2022. 3. 23. 00:15

innerHTML 과 innerText의 차이

innerHTML 

- html태그 속성까지 적용

innerText

- html태그 속성이 아닌 문자열 텍스트를 적용

- 보이지 않을 요소들의 텍스트는 반환하지 않는다.

 

HTML

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

JS

innerHTML

function inputText() {
    document.querySelector(".inputbox").innerHTML ="<h1>nice</h1>"
}

JS

innerText

function inputText() {
    document.querySelector(".inputbox").innerText ="<h1>nice</h1>"
}

 

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

'Javascript' 카테고리의 다른 글

``(백틱)을 사용하는 이유  (0) 2022.03.25
setInterval()  (0) 2022.03.24
innerHTML()  (0) 2022.03.22
querySelector() / querySelectorAll()  (0) 2022.03.12
getElementById() / getElementsByClassName() / getElementsByTagName()  (0) 2022.03.12
'Javascript' Related Articles more
Comments