innerText / innerHTML 비교

값 가져오기 (innerText vs innerHTML)

이 두 속성은 다루는 값이 text element인지, html element인지에 따라 사용법이 다르다.

<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 = document.getElementById('content');
  alert(element.innerText);
  // A
  // B
}

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

element.innerText;

이 속성은 element 안의 text 값들만을 가져옵니다.

 

element.innerHTML;

innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.

 

 

값 설정하기 (innerText vs innerHTML)

<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>";
} 
// <div style='color:red'>A</div>



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

 

<- innerText() 버튼 클릭

 

 

 

<- innerHTML() 버튼 클릭

 

 

element.innerText = "<div style='color:red'>A</div>";

element.innerText에 html을 포함한 문자열을 입력하면, 

html코드가 문자열로 element안에 포함되어 문자열이 html 코드라도 html코드로서 적용이 되지 않는다.

(단순한 문자열로 해당 element 안에 삽입)

 

element.innerHTML = "<div style='color:red'>A</div>";

위와 같이 element.innerHTML 속성에 html코드를 입력하면,

html 코드가 적용이 되어 해당 element 안에 적용 된다. 

위 예제에서 'innerHTML()'을 클릭하면,

입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인 할 수 있다.