Search code examples
htmlcssresourcesexternal

How can I load a <div> from a different file into my page

I want my page to have a navigation menu, but I don't want to copy and paste it to every webpage every time I update it, so I'm trying to put it in a separate file and load it into a div

Solution

  • You can use w3-include:

    <!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

    Or PHP:

    <html>
<body>

<div class="menu">
<?php include 'menu.php';?>
</div>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>

</body>
</html>

    There are other ways too, I just included two.