관리 메뉴

공부한것들을 정리하는 블로그 입니다.

jQuery : html 에서 html 삽입하기 본문

JavaScript 공부

jQuery : html 에서 html 삽입하기

호 두 2019. 8. 12. 17:35
반응형

 

방법1.

 

999_test1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
      $(document).ready(function(){
         $("#header").load("999_test2.html")
        /* id 지정을 통해서도 가능합니다. 
         $("#header").load("header.html #navbar")
         */       
      });
</script>    
</head>

<body>
	<h1>before</h1>
    <div id="header"><h1>include</h1></div>
</body>


</html>

 

999_test2.html

<div id="navbar">
	<ul class="nav">
		<li><a href="#">munu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
	</ul>
</div>

 

캡처

- 적용전

 

- 적용후

 

파일첨부

999_test1.html
0.00MB
999_test2.html
0.00MB

 

 

 

방법2.

 

998_test1.html

<html>
<head>
 <title>Include Sample</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript" src="998_test1.js"></script>
 <script type="text/javascript">
  function headerCompleted() {
   $("#sample").html("haha");
  }
  function footerCompleted() {
   $("#sample2").html("hoho");
  }
 </script>
</head>
<body>
 <!-- "include-html" 태그의 "target" 속성에 대치시킬 파일을 지정해준다. -->
 <include-html target="998_test2.html" completed="headerCompleted"></include-html>
 <div>Contents</div>
 <include-html target="998_test3.html" completed="footerCompleted"></include-html>

 <script>includeHtml();</script>
</body>
</html>

 

998_test1.js

function includeHtml() {
 $("include-html").each(function() {
  element = $(this);
  element.load(element.attr("target"), eval(element.attr("completed")));
 });
}

 

998_test2.html

<div>Header</div>
<div id="sample"></div>

 

998_test3.html

<div>Footer</div>
<div id="sample2"></div>

 

캡처

- 적용전

 

- 적용후

 

파일첨부

998_test1.html
0.00MB
998_test1.js
0.00MB
998_test2.html
0.00MB
998_test3.html
0.00MB

 

 

반응형
저작자표시 비영리 변경금지

'JavaScript 공부' 카테고리의 다른 글

[javascript] 웹 브라우저의 현재 URL 가져오기  (0) 2019.12.10
React.JS 기본 공부  (0) 2019.11.27
모듈이란?  (0) 2019.11.23
[펌] jQuery 보다 먼저 알았으면 좋았을 것들  (0) 2019.08.13
jQuery : 모바일/PC 환경에서 터치/마우스 스크롤 + 무한스크롤 기능  (0) 2019.08.09
jQuery : 모바일/PC 환경에서 터치/마우스 스크롤 기능  (0) 2019.08.08
무한 스크롤(Infinity Scrolling) + 좌우로 화면을 밀어서 페이지이동(Swipe, Flick)  (0) 2019.07.29
크롬 개발자 도구로 JavaScript, HTML 디버깅  (0) 2019.07.23
'JavaScript 공부' Related Articles more
Comments