IT/Javascript

[Javascript] div 생성, 삭제, 숨기기

hi.anna 2021. 1. 6. 06:00

 

지난번에는 <div> 안의 내용을 추가, 변경, 삭제하고, 읽어오는 방법을 알아보았습니다.

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

 

이번에는 <div> 태그를 생성하고, 삭제하고, 숨기는 방법을 정리해 보도록 하겠습니다.

 

 

1. <div> element 생성하기

<body>
  <input type='button'
         value='createDiv'
         onclick='createDiv()'/>
</body>
function createDiv() {
  // 1. <div> element 만들기
  const newDiv = document.createElement('div');
  
  // 2. <div>에 들어갈 text node 만들기
  const newText = document.createTextNode('안녕하세요');
  
  // 3. <div>에 text node 붙이기
  newDiv.appendChild(newText);
  
  // 4. <body>에 1에서 만든 <div> element 붙이기
  document.body.appendChild(newDiv);
}

 

const newDiv = document.createElement('div');

새로운 <div> element를 생성합니다.

 

const newText = document.createTextNode('안녕하세요');

<div> element에 붙일 텍스트 노드를 생성합니다.

 

newDiv.appendChild(newText);

텍스트 노드를 <div>에 element에 붙입니다.

 

document.body.appendChild(newDiv);

<div> element를 <body>에 붙입니다.

 

이 때, 텍스트 노드를 생성하고, 이 텍스트 노드를 <div>에 붙이는 것을

innerText, innerHTML, textContent를 사용할 수도 있습니다.

자세한 내용은 지난 포스팅을 참조하세요.

[Javascript] innerHTML, innerText, textContent 차이점

 

 

2. <div> element 삭제하기

<div id='my_div'>
  버튼을 누르면 이 div는 삭제됩니다.
</div>
<input type='button'
       value='deleteDiv'
       onclick='deleteDiv()'/>

function deleteDiv() {
  const div = document.getElementById('my_div');
  
  div.remove();
}

 

div.remove();

element를 삭제하기 위해서는,

삭제하려는 element를 선택하고, element.remove() 함수를 호출합니다.

 

 

3. <div> element 숨기기

 style.display 속성 사용하기 

<div id='my_div'>
  버튼을 누르면 이 div는 토글됩니다.
</div>
<input type='button'
       value='toggleDiv'
       onclick='toggleDiv()'/>

function toggleDiv() {
  const div = document.getElementById('my_div');
  
  if(div.style.display === 'none')  {
    div.style.display = 'block';
  }else {
    div.style.display = 'none';
  }
}

 

위 예제는 버튼을 누를 때마다 상단의 <div> 영역이 toggle 되는 예제입니다.

버튼이 클릭될 때마다

div.style.display 값을 체크하고,

div.style.display 값을 'block', 'none'으로 설정해 주었습니다.

 

 style.visibility 속성 사용하기 

<div id='my_div'>
  버튼을 누르면 이 div는 토글됩니다.
</div>
<input type='button'
       value='toggleDiv'
       onclick='toggleDiv()'/>

function toggleDiv() {
  const div = document.getElementById('my_div');
  
  if(div.style.visibility === 'hidden')  {
    div.style.visibility = 'visible';
  }else {
    div.style.visibility = 'hidden';
  }
}

 

이 예제도 위의 예제(style.display 속성 사용하기)와 같이

버튼을 클릭할 때마다 <div>영역이 토글 됩니다.

display 속성 대신 visibility 속성을 사용하면,

<div>가 hidden이 되더라도 원래 <div>가 있던 영역은 그대로 유지됩니다.

이 예제에서는 <div>가 hidden이 되더라도

<div> 영역이 유지되므로, 버튼의 위치도 움직이지 않는 것을 확인 할 수 있습니다.

 

 

element를 생성, 삭제하고, 숨기기 하는 방법을 알아보았습니다.

 

 

 

반응형