DEV/javascript

Javascript innerText, innerHTML, textContent 차이

석봉 2022. 4. 28. 23:13

결과

하단 코드의 결과

 

Text : 노드내의 보이는 텍스트 추출

HTML : HTML이나 XML을 불러옴

textContent : 노드내의 모든 텍스트 추출

 

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <div id="testDiv">
        <div>테스트 코드 입니다.</div>
        <div style="display:none">보이지 않는 div</div>
    </div>
</body>
<script src="./test.js"></script>
</html>

test.js

$(document).ready(function() {
    console.log("innerText : ", document.getElementById('testDiv').innerText);
    console.log("innerHTML : ", document.getElementById('testDiv').innerHTML);
    console.log("textContent : ", document.getElementById('testDiv').textContent);
});