Coding Note

[JS] 버튼 클릭 시 <div> 텍스트 생성, 삭제, 숨김 본문

Web/JavaScript

[JS] 버튼 클릭 시 <div> 텍스트 생성, 삭제, 숨김

jinnkim 2022. 1. 28. 09:30

 

1. 생성

코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button</title>

<script type="text/javascript">

	//생성
	function createBtn() {
		  
		  const New = document.createElement('div');
		  const Text = document.createTextNode('Hello JS');
		  
		  New.appendChild(Text);
		  // <body>에 <div> element 붙이기
		  document.body.appendChild(New);		  
		} 
</script>
</head>
<body>
	<h5>버튼 클릭시 텍스트 출력</h5>
  	<input type="button"  value="createBtn" onclick="createBtn()"/>		
</body>
</html>

 

2. 삭제, 숨김

 

 

코드 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button</title>

<script type="text/javascript">
    //삭제
	function removeBtn() {
		 const div = document.getElementById('remove');
		  div.remove();
	}
	
	//숨김
	function hidDiv() {
			  const div = document.getElementById('hid');
			  
			  if(div.style.display === 'none')  {
			    div.style.display = 'block';
			  }else {
			    div.style.display = 'none';
			  }
			} 
	
</script>

</head>
<body>
	<h5>버튼 클릭시 텍스트 삭제</h5>
  	<div id='remove'>
 	 버튼 클릭시 이 div 태그 속 텍스트 삭제 기능
	</div>
  	<input type="button"  value="removeBtn" onclick="removeBtn()"/>
    
    <h5>버튼 클릭시 텍스트 숨김</h5>
    <div id='hid'>
 	버튼 클릭시 div 숨김 기능
	</div>
	<input type='button'
       value='hidBtn'
       onclick='hidDiv()'/>    		
</body>
</html>

 

 

 

< JavaScript 공부하기 >

!JavaScript를 이용하여 문서에 HTML 요소 추가!

1. createElement()

   - HTML 요소 생성

 

2. createTextNode('문자열')

    - 선택한 요소에 텍스트 추가 

 

3. appendChild()

   - 선택한 요소 안에 자식 요소 추가

 

예시)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button</title>
</head>
<body>
<script type="text/javascript">
       //생성 할 요소 작성
	var jsStudyB = document.createElement('button');
	var jsStudyT = document.createTextNode('click')
	
	jsStudyB.appendChild(jsStudyT);
	document.body.appendChild(jsStudyB);
	
</script>
</body>
</html>

 

 

'Web > JavaScript' 카테고리의 다른 글

REST 개념 정리  (0) 2022.03.13
[JS] 이메일 유효성 검사하기  (0) 2022.01.30
[JS] 아이디, 비밀번호 유효성 검사  (0) 2022.01.29
[JS] radio 속성을 이용해 사이트 이동하기  (0) 2022.01.28
[JS] 구구단 출력하기  (0) 2022.01.27
'Web/JavaScript' Related Articles more
Comments