[JavaScript] innerHTML vs innerText

 

 

innerHTML

작성한 문자열 중에 HTML 속성의 문자가 있다면, HTML 형식으로 적용된다. (태그 등)

const context = document.querySelector('.hello')

function mouseEnter() {
    context.innerHTML = "<div style='color:green'>mouse is hear!</div>"; 
    head.style.color = 'red';
}

head.addEventListener('mouseenter', mouseEnter)

 

위 코드에서 해당 문자 위에 마우스를 갖다 놓으면 아래와 같이 HTML 태그가 적용되어 나타난다.

 

 

innerText

innerHTML과 반대다.

입력한 문자열에 HTML 속성이 적용되지 않고 문자 그대로 나타난다.

const context = document.querySelector('.hello')

function mouseEnter() {
    context.innerText = "<div style='color:green'>mouse is hear!</div>"; 
    head.style.color = 'red';
}

head.addEventListener('mouseenter', mouseEnter)

 

위 코드에서 문자 위에 마우스를 갖다 놓으면 아래와 같이 HTML 태그가 적용되지 않고 문자열 그대로 나타난다.