innerText 와 innerHTML은 단순한 텍스트만 다룰 경우에는 크게 차이가 없습니다.
다만 이 두 속성은 다루는 값이 text인지 html인지에 따라 차이가 납니다.

값 가져오기

<div id='content'>
  <div>A</div>
  <div>B</div>
</div>

<input 
  type='button' 
  value='innerText()'
  onclick='getInnerText()' />
<input 
  type='button' 
  value='innerHTML()' 
  onclick='getInnerHTML()' />

function getInnerText(){
  const element = docuument.getElementById('content');
  //A
  //B
  alert(element.innetText);
}

function getInnerHTML(){
  const element = document.getElementById('content');
  //<div>A</div>
  //<div>B</div>
  alert(element.innerHTML);
}

• element.innerText;
  : 이 속성은 element 안의 text값들만 가져옵니다.
• element.innerHTML;
  : innerText와는 달리 element 안의 HTML이나 XML을 가져옵니다.

값 설정하기

<div id='content'>
</div>

<input 
  type='button' 
  value='innerText()'
  onclick='setInnerText()' />
<input 
  type='button' 
  value='innerHTML()' 
  onclick='setInnerHTML()' />

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

• element.innerText = "<div style='color:red'>A</div>";
  : element.innerText에 html을 포함한 문자열을 입력하면, html 코드가 문자열 그대로 element안에 포함됩니다.
• element.innerHTML = "<div style='color:red'>A</div>";
  : element.innerHTML 속성에 html 코드를 입력하면 html element가 element안에 포함하게 됩니다.
  따라서 위 예제에서 innerHTML()을 클릭한다면
  입력한 html 태그가 해석되어 빨간색 A가 나타나는 것을 볼 수 있습니다.