프로그래밍/JavaScript

JavaScript 태그안의 내용 가져오기, 변경하기

꾸션 2022. 6. 29. 15:52
반응형

JavaScript로 html 태그로 둘러싸인 내용을 가져오거나, 변경하는 방법입니다.

  • innerText
  • textContent
  • innerHTML

 

HTML 태그안의 내용 가져오기

실습 예제 html 문구

<ul id="fruit">
  <li>딸기</li>
  <li>사과</li>
  <li>바나나</li>
</ul>

 

innerText

순수 텍스트만 가져옵니다.

document.getElementById('fruit').innerText
// '딸기\n사과\n바나나'

 

textContent

html태그를 제외한 내용을 가져옵니다.

document.getElementById('fruit').textContent
// '\n      딸기\n      사과\n      바나나\n    '

 

innerHTML

html태그를 포함한 선택 요소안의 내용을 가져옵니다.

document.getElementById('fruit').innerHTML
// '\n      <li>딸기</li>\n      <li>사과</li>\n      <li>바나나</li>\n    '

 

HTML 태그안의 내용 변경하기

실습 예제 html 문구

<p id="title">꾸션</p>

 

innerText

'<', '>'와 같은 코드는 html 특수코드로 변경되며, 줄 바꿈은 '<br>'태그로 변경됩니다.

document.getElementById('title').innerText = `<i>aaa
bbb</i>`

/*
<p id="title">&lt;i&gt;aaa<br>bbb&lt;/i&gt;</p>
*/

웹브라우저에서 본 화면

<i>aaa
bbb</i>

 

textContent

'<', '>'와 같은 코드는 html 특수코드로 변경되며, 줄 바꿈은 그대로 유지합니다.

document.getElementById('title').textContent = `<i>aaa
bbb</i>`

/*
<p id="title">&lt;i&gt;aaa
bbb&lt;/i&gt;</p>
*/

웹브라우저에서 본 화면

<i>aaa bbb</i>

 

innerHTML

html 태그 그대로 변경됩니다.

document.getElementById('title').innerHTML = `<i>aaa
bbb</i>`

/*
<p id="title"><i>aaa
bbb</i></p>
*/

웹브라우저에서 본 화면

aaa bbb

 

반응형