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

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

 

아래는 태그안의 내용을 가져오거나, 변경하기 위해 사용되는 속성들입니다.

각 각의 요소에 대한 간략한 설명은 아래와 같습니다.

• innerText: 순수 텍스트 처리를 합니다.
• textContent: 순수 텍스트 처리를 하지만 줄 바꿈은 유지 됩니다.
• innerHTML: html 태그를 유지하며 처리 됩니다.

위 요소들에 대한 내용 가져오기, 변경하기에 대해서 아래에 예제를 나열하니, 사용 목적에 맞게 적절하게 사용하시기 바랍니다.

 

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

 

 

더 자세한 정보는 아래 MDN 문서를 참고하시기 바랍니다.

HTMLElement.innerText - Web API | MDN

Node.textContent - Web API | MDN

Element.innerHTML - Web API | MDN