코딩_javascript
div show() 방법 중 template 사용하는 방법
잠수콩
2020. 8. 28. 10:38
제목 : 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
출처 : 나