[JavaScript] HTML 요소의 내용을 읽고 쓰기 | textContent와 innerText 프로퍼티 📝

👩‍💻 textContent

요소의 내용을 웹 페이지에 표시했을 때 텍스트 정보를 표시

 

👨‍💻 innerText

HTML 요소의 내용을 가리키며, 요소 안의 코드를 읽거나 쓸 수 있음

 

---

[textContent와 innerText 비교]

1)

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

 

콘솔 창에  <span>hi</span>

---

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

 

콘솔 창에  hi

 

---

 

2)

 

document.getElementById("test").innerHTML=`<h1>JavaScript</h1>`;

 

웹 페이지에 JavaScript

---

document.getElementById("test").textContent=`<h1>JavaScript</h1>`

웹 페이지에 <h1>JavaScript</h1>