배우기는 한 개념이지만 위 세가지의 정확한 차이점을 알고 차이를 잘 알고 쓰기위해
정리 해 보았습니다.

1. innerHTML

innerHTML은 Element의 속성으로 , element내에 포함 된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.

2. innerText

innerText는 Element의 속성으로 , element내에서 사용자에게 보여지는 text값들을 가져오거나
설정할 수 있다.

<script>
function setInnerText()  {
  const element = document.getElementById('content');
  element.innerText = "<div style='color:red'>A</div>";
}

function setInnerHTML()  {
  const element = document.getElementById('content');
  element.innerHTML = "<div style='color:red'>A</div>";
}
</script>

innerHTML과 innerText의 차이점

element.innerText에 html을 포함한 문자열을 입력하면, 
html코드가 문자열 그대로 element안에 포함됩니다.

위와 같이 element.innerHTML 속성에 html코드를 입력하면,
html element가 element안에 포함되게 됩니다.

3. textContent

textContent는 'Node'의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 script나 style 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.

<div id='content'>
  hello 
  <span style='display:none'>text</span>
</div>

<script>
	const content = document.getElementById('content');
    
    console.log(content.innerHTML);
    // hello
    // <span style='display:none'>text</span>
    
    -----------------------------------------------------
  
	console.log(content.innerText);
	// 사용자에게 보여지는 텍스트만 가져옴
	// 숨겨진 텍스트는 사용자에게 보여지지 않기 때문에 안녕~만 가져옴

	// hello

	-----------------------------------------------------
  
	console.log(content.textContent);
	// 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴

	// hello
	// text
</script>