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>"
}

 

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