3초기억력

div show() 방법 중 template 사용하는 방법 본문

코딩_javascript

div show() 방법 중 template 사용하는 방법

잠수콩 2020. 8. 28. 10:38
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


제목 : div show() 방법 중 template 사용하는 방법

소스 :

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>클릭하면 div 보임</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  <style>
	#div1_view{width:100px;background:#ccc;line-height:30px;text-align:center;}
  </style>
 </head>
 <body>

<button id="button1">클릭하면 show1에 div1이 보임</button>

<div id="show1"></div>

<script>
	$('#button1').click(function(){
		$('#show1').html($('#div1').html());
	});
</script>

<script type="text/template" id="div1">
	<div id="div1_view" style="margin-top:10px;">
		이게 div1 임
	</div>
</script>

 </body>
</html>

 



내용 :

 

보통 div 를 style="display:none" 한 후에, 버튼 action 에 onclick 이벤트를 받아서

해당 id 의 display:block 처리를 하는 방법이 있지만,

 

<script type="text/template">

 

</script>

 

를 사용하면, html 에서는 text/template 이 해석이 안되니 노출이 안되고,

template 내부의 html 소스를 그대로 html() 로 가져와서 보여주면 된다.

 

예제 소스 파일 :

div_show.zip
0.00MB

 출처 :  나

 



저작자표시

'코딩_javascript' 카테고리의 다른 글

해외 IP 접속 불가 javascript API  (0) 2023.11.16
전화기 키패드의 영어를 숫자로 변환해주는 javascript  (0) 2020.09.02
HTML5 Web Storage Objects - localstorage 사용법  (0) 2017.11.08
매번 까먹는 javascript - checkbox 멀티 선택 value 처리  (0) 2017.01.26
easyTree.js 사용하여 트리메뉴 구조 중, 이동 처리시 샘플 html  (0) 2016.12.01
'코딩_javascript' Related Articles more
Comments