🔥 #16 javascript(innerHTML과 textContent의 차이)

🔥 innerHTML과 textContent의 차이

• innerHTML : Element의 HTML, XML을 읽어오거나, 설정할 수 있다. 태그안에 있는 HTML전체 내용을 들고온다.
• textContent : 해상 노드가 가지고 있는 텍스트의 값을 그대로 가져온다.

예시
html에 이런 태그가 있다고 가정할때

<div id="test"><span>hi</span></div>

자바스크립트에 작성을했다.

console.log(document.getElementById("test").innerHTML)
console.log(document.getElementById("test").textContent)

다음 결과 값은?

console.log(document.getElementById("test").innerHTML)
값 : <span>hi</span>

console.log(document.getElementById("test").textContent)
값 : h1

document.getElementById("test").innerHTML=`<h1>Noona</h1>`
document.getElementById("test").textConent=`<h1>Noona</h1>`

다음 결과 값은?

document.getElementById("test").innerHTML=<h1>Noona</h1>
값 : Noona

document.getElementById("test").textConent=<h1>Noona</h1>
값 : hi

🔥 Template Literal

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

• 기존 ES5에서의 코드
  function introduce(name,age){
  console.log("제 이름은"+name+"이고, 저는"+age+"살 입니다")
  }

• ES6에서의 새로운 방법
  function introduce(name,age){
  console.log(`제 이름은${name}이고 ${age}살 입니다.`)

더이상 +로 문장을 이을필요가 없다