Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제

Javascript로 <div> 안의 내용을 가져오거나, 변경, 추가, 삭제하는 방법에 대해서 알아보겠습니다.

1. div 안의 html 가져오기, 변경, 추가, 삭제

div 요소에서 innerHTML 속성을 통해 html을 읽을 수 있습니다. 이 속성에 다른 값을 입력하여 기존 값을 변경하거나 추가, 삭제가 가능합니다.

HTML

HTML에는 div가 있고 4개의 버튼이 있습니다. 각 버튼을 누를 때마다 div 안의 html을 가져오거나, 변경, 추가, 삭제가 되도록 구현하려고 합니다.

<div id="myDiv"><p>안녕하세요~~!!!</p></div>

<button onclick="getContents()">내용 가져오기</button>
<button onclick="changeContent()">내용 변경</button>
<button onclick="addContent()">내용 추가</button>
<button onclick="removeContent()">내용 삭제</button>

Javascript

각각의 버튼이 눌릴 때마다 내용 읽기, 변경, 추가, 삭제를 수행합니다.

• getContents() : div 요소를 가져오고 innerHTML로 html을 가져옵니다.
• changeContent() : innerHTML에 새로운 html을 대입하여, div 안의 html을 변경합니다.
• addContent() : innerHTML에 다른 내용을 추가하여, 기존 내용에 추가한 내용도 함께 보이도록 합니다.
• removeContent() : innerHTML = ""으로 비어있는 값을 입력하면, div 안의 내용이 모두 제거됩니다.

// 내용 가져오기
function getContents() {
  var divContent = document.getElementById("myDiv").innerHTML;
  alert(divContent);
}

// 내용 변경하기
function changeContent() {
  var newContent = "<p><b>새로운 내용으로 변경</b></p>";
  document.getElementById("myDiv").innerHTML = newContent;
}

// 내용 추가하기
function addContent() {
  var additionalContent = "<p>내용 추가</p>";
  document.getElementById("myDiv").innerHTML += additionalContent;
}

// 내용 삭제하기
function removeContent() {
  document.getElementById("myDiv").innerHTML = "";
}

innerHTML, innerText, textContent의 차이점

innerHTML, innerText, 그리고 textContent는 모두 DOM 요소의 내용을 조작하는 데 사용되는 속성들입니다.

간단히 말해,

• innerHTML : HTML 코드를 다루며, 보안상의 이유로 주의가 필요합니다.
• innerText : HTML 코드를 무시하고 텍스트만을 다루며, 렌더링되지 않은 숨겨진 텍스트도 가져올 수 있습니다.
• textContent : HTML 코드와 텍스트를 모두 다루지만, 시각적으로 보이지 않는 텍스트는 가져오지 않습니다.

innerHTML

• HTML 코드를 포함합니다. 따라서 HTML 태그와 함께 문자열을 사용하여 내용을 조작할 수 있습니다.
• 예를 들어, <div>안녕 <strong>세상</strong></div>과 같은 HTML 코드를 innerHTML을 통해 가져오거나 설정할 수 있습니다.

innerText

• HTML 코드가 아닌 보여지는 텍스트만을 다룹니다.
• <div>안녕 <strong>세상</strong></div> 같은 HTML 코드에서, innerText는 "안녕 세상" 값을 갖고 있습니다.
• innerText는 렌더링되지 않은 숨겨진 요소의 텍스트도 포함하여 가져오므로 시각적으로 화면에 보이지 않는 텍스트도 포함할 수 있습니다.

textContent:

• HTML 코드나 텍스트를 모두 다룹니다. HTML 태그를 텍스트로 다룹니다.
• textContent는 innerText와 달리 렌더링된 요소에 대한 정보를 고려하지 않습니다. 따라서 스타일링에 의해 숨겨진 텍스트도 가져옵니다.