innerHTML

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

즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있는 것이다.

<li>안녕하세요? 개발자입니다.</li>

const element = document.getElementById('li');
element.innerHTML
[결과]
<li>안녕하세요? 개발자입니다.</li>

innerText

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

<li>안녕하세요? 개발자입니다.</li>

const element = document.getElementById('li');
element.innerHTML
[결과]
안녕하세요? 개발자입니다.

textContent

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

<li>안녕하세요? 개발자입니다.<span style="color:blue">hidden Text</span></li>

const element = document.getElementById('li');
element.innerText
[결과]
안녕하세요? 개발자입니다.
hidden Text

Template Literal

ES6는Template Literal 이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, 작은 따옴표(') 또는 큰 따옴표(")와 같은 통상적인 따옴표 문자 대신 백틱(`)을 사용한다.

• ES5 기존 코드

function introduce(name,age){
console.log("제 이름은"+name+"이고, 저는"+age+"살 입니다")
}

• ES6 코드

function introduce(name,age){
console.log(`제 이름은${name}이고 ${age}살 입니다.`)
}