[javaScript] innerHTML / innerText 차이

Smile_Jay 2021. 5. 8. 18:38

innerHTML : tag까지 나옴

innerText : tag를 제외한 나머지 요소 값만 나옴

예를 들면, 아래와 같은 코드를 살펴보자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		//document.body.innerHTML: tag까지나옴
		alert('innerHTML : ' + document.body.innerHTML)
		//document.body.innerText: tag를 제외한 나머지 요소값만 나오게 
		alert('innerText : ' + document.body.innerText)
		
		let tags = ''
		tags += '<ul>'
		tags += '<li>red</li>'
		tags += '<li>orange</li>'
		tags += '<li>blue</li>'
		tags += '</ul>'
		
	//	document.body.innerHTML = tags
	//	document.body.innerText = tags
		
	//	함수 innnerHTML나옴
		document.write(tags)
	
	//	document.body.innerHTML = document.body.innerHTML + tags
	//	document.body.innerHTML += tags
	
	//	document.body.innerHTML += '<br>'
	//	document.body.innerText += tags
	}
</script>
</head>
<body>
	<h1>안녕하세요</h1>
	hello
</body>
</html>

[innerHTML의 경우]

결과값: <h1>안녕하세요<h1>

<h1>태그도 함께 쓰인다

[innerText의 경우]

결과값: 안녕하세요

<h1>태그는 쓰이지 않고 text만 나온다