[JavaScript] 태그 요소 숨기기 & 나타내기

특정 버튼을 클릭했을 때 다른 태그의 내용을 보여주고자 한다. 자바스크립트로 태그 내용을 숨겨보자.

또, 숨겼던 태그를 나타내보자.

1. 태그 숨기기

document.getElementById('userList').style.display = "none"

• document.getElementById로 숨기고자 하는 태그를 가져온다.
• style.display = "none"으로 숨긴다.

2. 태그 나타내기

document.getElementById('userList').style.display = "block"

• 위 내용과 동일하게 작성하고 none을 block으로 바꾸면 된다. 

3. 활용

계정생성 버튼을 선택하면 <div id="addDiv">가 나타나고 돌아가기를 클릭하면 <div id="userList>태그가 나타난다.

<div id="userList>
	<a type="button" class="btn btn-primary me-2" onclick="changeDiv()">계정생성</a>
</div>
<div id="addDiv">
	<a type="button" class="btn btn-primary me-2" onclick="changeDiv()">돌아가기</a>
</div>

 

        // 회원 리스트 폼 & 회원 생성 폼 전환
        function changeDiv() {
            var listDiv = document.getElementById('userList');
            var addDiv = document.getElementById('addUser');

            if(listDiv.style.display === 'none') {
                listDiv.style.display = 'block';
                addDiv.style.display = 'none';
            } else {
                listDiv.style.display = 'none';
                addDiv.style.display = 'block';
            }
        }

• a태그의 타입을 button으로 지정하고 onclick으로 자바스크립트 함수를 호출해준다.
• 버튼을 누르면 display 상태에 따라 특정 태그를 숨기고 나타낸다.