CODEWITHSUNDEEP
htmlcodeblocks
Titanlord
Titanlord

Reputation: 143

How to use the same HTML-Block on multiple websites?

I'm just coding my first Website and it has lots of Subsites. Every Website needs the same code-block at some point. This code block just contains HTML code. Is it possible to make a data with this code-block and import it on every website? My goal is: If I have to update the code-block I just want to do it once.

The code-block is a sidebar and looks like this:

<div id="sidebar">
    <div class="inner">
        <nav id="menu">
            <ul>
            <li><a href="../index.html">Homepage</a></li>
            <li>
                <span class="opener">SomeName</span>
                <ul>
                <li><a href="../Somestuff/SomeWebsite.html">Main Page</a></li>
                </ul>
            </li>
            </ul>
        </nav>
    </div>
</div>

Upvotes: 0

Views: 709

Answers (3)

StrayAnt
StrayAnt

Reputation: 379

You could make a simple JS function that sets the innerHTML of a already existing HTML element. And put the function in an external JS file.

example below

<!DOCTYPE html>

<head>
    <title>Test</title>

    <!-- link external js file with create element function -->
   <script type="text/javascript">
        function createElement(){
            //Get parent container
            const parent = document.getElementById('sidebar');

            //Set inner html 
            parent.innerHTML = 
            `<div id="sidebar">
                <div class="inner">
                    <nav id="menu">
                        <ul>
                        <li><a href="../index.html">Homepage</a></li>
                        <li>
                            <span class="opener"SomeName</span>
                            <ul>
                            <li><a href="../Somestuff/SomeWebsite.html">Main Page</a></li>
                            </ul>
                        </li>
                        </ul>
                    </nav>
                </div>
            </div>`;
        }
   </script>
</head>
<body>
    
    <div id="sidebar">
        <script type="text/javascript">
            createElement();
        </script>
    </div>


</body>

</html>

Upvotes: 0

MefAldemisov
MefAldemisov

Reputation: 901

This question could be useful. Also this post asks about similar things.

Also frameworks (such as Vue, React, Angular...) are used for such purposes.

Upvotes: 2

Baptiste Leroux
Baptiste Leroux

Reputation: 49

Which extensions are your file? Php or html? Cause if it’s php you can make a new file (for your example: nav.php) and then in every subsites you need to do: require path_to_your_nav.php

If it’s html, i dont know there is no solution yet

Upvotes: 0

Related Questions