[ JavaScript ] innerHTML, textContent

하루입니다.

 

 

---

 

 

엘리먼트의 HTML 컨텐츠 조작하기

엘리먼트의 HTML 컨텐츠 조회하기

let 변수 = element.innerHTML;
* 변수에는 태그가 포함된 HTML 컨텐츠가 대입된다.

<div id="box">
<h3>연습</h3>
<p>연습입니다.</p>
</div>
let content = document.getElementById('box').innerHTML;

* content는 '<h3>연습</h3><p>연습입니다.</p>'이다.

 

 

엘리먼트의 HTML 컨텐츠 변경하기

element.innerHTML = '태그를 포함하고 있는 HTML 컨텐츠'

• 변경 전

<div id="box">
<h3>연습</h3>
<p>연습입니다.</p>
</div>
document.getElementById('box').innerHTML = '<h2>자바스크립트 연습</h2><p>배열과 반복문을 연습해보자</p>';

 

• 변경 후

<div id="box">
<h2>자바스크립트 연습</h2>
<p>배열과 반복문을 연습해보자</p>
</div>

 

 

 

엘리먼트의 Text 컨텐츠 조작하기

엘리먼트의 Text 컨텐츠 조회하기

let 변수 = element.textContent;
* 변수에는 태그가 제외된 Text 컨텐츠가 대입된다.

<div id="box">
<h3>연습</h3>
<p>연습입니다.</p>
</div>
let content = document.getElementById('box').textContent;

* content는 '연습연습입니다.'이다.
* 태그가 포함된 컨텐츠를 조회할 땐 element.textContent의 사용을 지양하자.

 

 

<div id="box">
<h3>연습</h3>
<p>연습입니다.</p>
</div>
let content = document.querySelector('#box p').textContent;

* content는 '연습입니다.'이다.
* 위와 같이 엘리먼트가 포함하고 있는 Text 컨텐츠를 조회할 때만 사용한다.

 

 

엘리먼트의 Text 컨텐츠 변경하기

element.textContent = '태그가 포함되어 있지 않는 텍스트 컨텐츠'

• 변경전

<div>총 결재금액 : <strong id="pay-price">0</strong> 원</div>
document.querySelector("#pay-price").textContent = '150,000';

 

• 변경후

<div>총 결재금액 : <strong id="pay-price">150,000</strong> 원</div>

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!