[Javascript] div 안의 내용 가져오기, 추가, 변경, 삭제 (text, html)

 

<div> 태그 안에 있는 내용을 읽고, 추가하고, 변경하고, 삭제하는 방법을 정리해보았습니다.

 

1. div 내용 가져오기
2. div 내용 변경
3. div 내용 추가
4. div 내용 삭제

 

1. div 내용 가져오기

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='getInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='getInnerText()'/>
<input type='button'
       value='textContent'
       onclick='getTextContent()'/>

 

Javascript에서 div element에 접근하여,

div 안의 내용을 읽을 때는 다음 3가지 속성을 사용할 수 있습니다.

1. element.innerHTML
   • element 안의 HTML, XML을 읽습니다.
2. element.innerText
   • element 안의 텍스트를 사용자에게 "보여지는 대로" 읽습니다. 
3. node.textContent
   • node 안의 텍스트를 (<script>, <style>에 상관없이) 읽습니다.

위 3가지 속성의 차이점은 지난 포스팅을 참조하세요.

[Javascript] innerText와 innerHTML의 차이점

[Javascript] innerHTML, innerText, textContent 차이점

 

 

2. div 내용 변경

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='setInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='setInnerText()'/>
<input type='button'
       value='textContent'
       onclick='setTextContent()'/>

function setInnerHTML() {
  const element = document.getElementById('my_div');
  element.innerHTML 
    = '<div style="color:blue">InnerHTML<div>';
} 

function setInnerText() {
  const element = document.getElementById('my_div');
  element.innerText 
    = '<div style="color:blue">InnerText<div>';
} 

function setTextContent() {
  const element = document.getElementById('my_div');
  element.textContent 
    = '<div style="color:blue">TextContent<div>';
} 

 

div 안의 내용을 읽을 때와 마찬가지로, div에 내용을 변경할 때도

innerHTML, innerText, textContent 속성을 사용할 수 있습니다.

innerHTML 속성에 HTML 문자열을 적용하면,

html element가 div 태그 안에들어가서 style이 적용된 문자열이 브라우저에 나타나는 것을 볼 수 있습니다.

innerText와 textContent는 할당한 문자열을 그대로 텍스트 형태로 div안에 넣습니다.

 

 

3. div 내용 추가

 innerHTML, innerText, textContent 

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='setInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='setInnerText()'/>
<input type='button'
       value='textContent'
       onclick='setTextContent()'/>

<input type='button'
       value='refresh(초기화)'
       onclick='refresh()' />

function setInnerHTML() {
  const element = document.getElementById('my_div');
  element.innerHTML += '<div>InnerHTML<div>';
} 

function setInnerText() {
  const element = document.getElementById('my_div');
  element.innerText += '<div>InnerText<div>';
} 

function setTextContent() {
  const element = document.getElementById('my_div');
  element.textContent += '<div>TextContent<div>';
} 

function refresh()  {
  const element = document.getElementById('my_div');
  element.innerHTML 
    = '<span style="color:red">안녕하세요?</span>';
}

 

div 안의 내용에 새로운 내용을 추가할 때도 

innerHTML, innerText, textContent 속성을 사용할 수 있습니다.

이번에는 내용을 추가하는 것이기 때문에 '+=' 연산자를 사용하였습니다.

 

innerHTML, innerText, textContent 버튼을 순서대로 눌러보면,

innerHTML을 클릭하면,

원래 div안에 있던 '빨간색 안녕하세요?'가 그대로 유지되고,

그 뒤에 'InnerHTML' 텍스트가 추가되지만,

innerText나 textContent를 클릭하면,

기존 'color:red' 스타일이 삭제되는 것을 확인할 수 있습니다.

 

 왜일까요? 

innerHTML로 div 내용을 읽으면,

"<span style='color:red'>안녕하세요?</span>"가 읽히고,

여기에 "<div>InnerHTML</div>"를 추가하여,

innerHTML의 값을 세팅하면, 

div에는 "<span style='color:red'>안녕하세요?</span><div>InnerHTML</div>"가 들어가게 됩니다.

그러면, 기존의 스타일이 적용된 '안녕하세요?'는 변함없이 그대로 출력되겠죠?

 

그럼 innerText, textContent를 살펴봅시다.

innerText나 div안의 값을 읽으면,

'안녕하세요?'라는 텍스트만 읽힐 것입니다. 

그리고 여기에 '<div>InnerText</div>를 추가하여, 

innerText의 값을 세팅하면,

div에는 "안녕하세요?<div>InnerText</div>"가 들어가게 될 것입니다.

textContent도 마찬가지 입니다.

결국, div 안의 텍스트를 추가했는데, 의도치 않게 기존에 있던 내용의 style 정보가 사라져 버렸습니다.

그래서 단순히 텍스트를 추가하는 것이 아닌 경우에는,

아래의 appendChild() 함수를 사용하는 것을 추천합니다.

 

 appendChild() - 텍스트 추가 

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='appendChild'
       onclick='appendText()'/>

function appendText() {
  const element = document.getElementById('my_div');
  const content = 
        document.createTextNode("AppendChild");
  
  element.appendChild(content);
} 

 

div에 단순히 텍스트를 추가하는 예제입니다.

document.createTextNode() 함수를 이용하여 텍스트 노드를 만들고,

element.appendChild() 함수를 이용하여, 앞에서 생성한 텍스트 노드를 기존의 element에 추가하였습니다.

이렇게 하면, 기존에 div가 가지고 있는 span태그와 스타일을 유지하면서 

텍스트 노드를 추가할 수 있습니다.

 

 appencChild() - 새로운 div element 추가 

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='appendChild'
       onclick='appendDiv()'/>

function appendDiv() {
  const element = document.getElementById('my_div');
  
  // new div 생성
  const newDiv = document.createElement('div');
  
  // new div에 style 추가
  newDiv.style.color = 'blue';
  
  // new div에 추가할 text node 생성
  const newText = document.createTextNode("AppendChild");
  
  // text node를 new div에 추가
  newDiv.appendChild(newText);
  
  // new div를 기존 div에 추가
  element.appendChild(newDiv);
} 

 

이번에는 div에 단순한 텍스트 노드가 아닌 style 속성을 가지는 div element를 추가하는 예제입니다.

앞의 예제와 같이 appendChild() 함수를 사용하는데,

그 전에 document.createElement(), element.style.color, document.createTextNode() 함수를 이용하여

style 속성을 가지는 div를 생성하고 그 안에 텍스트 노드를 추가하였습니다.

그리고, 이렇게 만들어진 div element를 appendChild() 함수를 이용하여

기존 div에 추가하였습니다.

이렇게 하면, 기존의 div에 있던 span 태그와 style 속성을 유지하면서

새로운 div element를 추가할 수 있습니다.

 

 

4. div 내용 삭제

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='deleteText'
       onclick='deleteText()'/>

function deleteText() {
  const element = document.getElementById('my_div');
  
  element.innerText = '';
} 

 

div 안의 내용을 삭제하는 것 또한 innerHTML, innerText, textContent를 이용합니다.

 

---

 

div 안의 내용을 추가, 변경, 삭제하고 읽는 방법을 알아보았습니다.