JavaScript を使用して HTML で再利用可能なヘッダーとフッターを作成するにはどうすればよいですか?

HTML ページ用の再利用可能なヘッダー ファイルとフッター ファイルの作成

概要:

Web 開発の分野では、ヘッダーやフッターなど、複数の要素にわたってシームレスに統合できる再利用可能な要素を作成すると有益です。 HTML ページ。これにより、メンテナンスが合理化されるだけでなく、一貫性と効率も確保されます。

JavaScript を使用した解決策:

この問題に対処するには、JavaScript、特に jQuery の力を活用できます。 。そのload()関数を利用することで、外部HTMLファイルをヘッダーおよびフッターとしてメインHTMLに動的にロードできます。 document.

実装:

1. Index.html:

   • jQuery を追加しますlibrary.
   • ロードするスクリプト タグを定義しますheader.html と footer.html を、load() 関数を使用して作成します。
   • プレースホルダー
     を作成します。一意の ID を持つヘッダーとフッターの要素。

   • Header.html および Footer.html:

     • Containヘッダーとフッターに必要な HTML コンテンツ、

   • 使用法:

     • index.html にアクセスし、ロードされたヘッダーとフッターを確認します。 content.

   コード例:

   Index.html:

   
   ...
   <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
   </script>
   <script> 
   $(function(){
     $("#header").load("header.html"); 
     $("#footer").load("footer.html"); 
   });
   </script> 
   ...
   
   
   <div>
   <p><strong>Header.html とFooter.html:</strong></p>
   <pre class="brush:php;toolbar:false"><a href="http://www.google.com">click here for google</a>

   この JavaScript ベースのアプローチを組み込むことで、共通のヘッダー ページとフッター ページを HTML ドキュメントに効果的に組み込むことができ、コードの再利用性が向上し、Web ページ全体での一貫性が維持されます。