Insert block of HTML into HTML file using JS

Question

I want to insert this HTML block into an other HTML file using JS, because if I need to edit the navigation, I can just edit it in the JS file:

<div class="navbar">
    <div class="dropdown">
        <div class="dropbtn" id="dropbtn">
            <a id="menu"><img src="files/i/menu.svg" width="30"></img><span id="menu-text">Menü</span></a></div>
        <div class="dropdown-content">
            <a id="home" href="index.html"><img src="files/i/home.svg" width="30"></img><span>Startseite</span>
            </a>
            <a id="me" href="about.html"><img src="files/i/me.svg" width="30"></img><span>Über mich</span></a>
            <a id="dienst" href="dienstleistungen.html"><img src="files/i/dienst.svg"
                    width="30"></img><span>Dienstleistungen</span> </a>
            <a id="form" href="form.html"><img src="files/i/form.svg" width="30"></img><span>Anfrage</span></a>
        </div>
    </div>
</div>

What is the easiest way to do this? I already searched but I only saw things to do it all alone. Does it exist an easy way to do this?

I already tried this but I get an error (Uncaught TypeError: Cannot set property 'innerHTML' of null: navbar.js:1):

document.getElementById('first-body').innerHTML = `
<div class = "navbar" >
    <div class = "dropdown" >
        <div class = "dropbtn" id = "dropbtn" >
            <a id = "menu" > 
                < img src = "files/i/menu.svg" width = "30" > < /img>
                <span id="menu-text">Menü</span > 
            < /a>
        </div >
        <div class = "dropdown-content" >
            <a id = "home" href = "index.html" > 
                <img src = "files/i/home.svg" width = "30" > < /img>
                <span>Startseite</span >
            </a>

            <a id = "me" href = "about.html"> 
                <img src = "files/i/me.svg" width = "30" > < /img>
                <span>Übermich < /span>
            </a >

            <a id = "dienst" href = "dienstleistungen.html" > 
                < img src = "files/i/dienst.svg" width = "30" > < /img>
                <span>Dienstleistungen</span > 
            < /a> 
            
            <a id = "form"href = "form.html" > 
                < img src = "files/i/form.svg" width = "30" > < /img>
                <span>Anfrage</span > 
            < /a>

        </div> 
    </div> 
</div>
`;

In my HTML file to insert I use this: <script type="text/javascript" src="navbar.js"></script>

My HTML file:

<!DOCTYPE html>
<html lang='de'>

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="files/i/favicon.svg" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>

<script type="text/javascript" src="navbar.js"></script>

<body id="first-body">
    <!--here should be the navigation with js-->
    <div class="body">
        <!--content-->
    </div>
</body>

</html>

Is it possible, that I cant use the <body> tag with an ID?

If I put the <script> before or after the </body>, it looks like this:

Do you definitely have a div with id of first-body? Can you post the file you want to paste into — Raph117, May 25 '21 at 11:59
document.getElementById('first-body') <- this is null, meaning it can't find first-body id. — Min Somai, May 25 '21 at 12:00
Is the script tag at the bottom of the body tag? Because otherwise your code will execute before the DOM is ready. And not find the div that you are looking for. — Siddharth Seth, May 25 '21 at 12:05
Move the script tag to the end of the body tag and it should work fine. — Siddharth Seth, May 25 '21 at 12:06
@SiddharthS. Now, I moved the script tag at the end of the body tag but its buggy now. It only shows on hover and it shows only the first img tag as text (I will post a screenshot in my question in a min. — chraebsli, May 25 '21 at 12:14
you can't have gaps between id and value. id="foo" ,not id = "foo" — Min Somai, May 25 '21 at 12:24
@MinSomai thanks but it still doesn't display the content in the — chraebsli, May 25 '21 at 12:30
Why not put your HTML in an HTML file and load it with JavaScript? There are many examples of how to do that on Stack Overflow and the internet. — Heretic Monkey, May 25 '21 at 12:54
@HereticMonkey I searched but I didn't find something useful. Can you post a link what you mean? — chraebsli, May 25 '21 at 13:47
[How do I load an HTML page in a `
` using JavaScript?](https://stackoverflow.com/q/17636528/215552) Look at more than the accepted answer. — Heretic Monkey, May 25 '21 at 13:52

score 0 · Answer 1 · answered May 25 '21 at 12:02

All you're missing is an element that has an ID of 'first-body'

document.getElementById('first-body').innerHTML = `
<div class = "navbar" >
    <div class = "dropdown" >
        <div class = "dropbtn" id = "dropbtn" >
            <a id = "menu" > 
                < img src = "files/i/menu.svg" width = "30" > < /img>
                <span id="menu-text">Menü</span > 
            < /a>
        </div >
        <div class = "dropdown-content" >
            <a id = "home" href = "index.html" > 
                <img src = "files/i/home.svg" width = "30" > < /img>
                <span>Startseite</span >
            </a>

            <a id = "me" href = "about.html"> 
                <img src = "files/i/me.svg" width = "30" > < /img>
                <span>Übermich < /span>
            </a >

            <a id = "dienst" href = "dienstleistungen.html" > 
                < img src = "files/i/dienst.svg" width = "30" > < /img>
                <span>Dienstleistungen</span > 
            < /a> 
            
            <a id = "form"href = "form.html" > 
                < img src = "files/i/form.svg" width = "30" > < /img>
                <span>Anfrage</span > 
            < /a>

        </div> 
    </div> 
</div>
`;

    <! –– You didn't have an element with id of 'first-body' ––>
    <div id="first-body">
    </div>

score 0 · Answer 2 · edited May 25 '21 at 12:52

It do work I can't see the problem here other than you should import the JS file in the end of your HTML file like the example below. Because if you have an <body> with id first-body It does work look the sample code below.

If you don't understand the code please read: HTML DOM innerHTML Property

document.getElementById('first-body').innerHTML = `
<div class = "navbar" >
    <div class = "dropdown" >
        <div class = "dropbtn" id = "dropbtn" >
            <a id = "menu" > 
                < img src = "files/i/menu.svg" width = "30" > < /img>
                <span id="menu-text">Menü</span > 
            < /a>
        </div >
        <div class = "dropdown-content" >
            <a id = "home" href = "index.html" > 
                <img src = "files/i/home.svg" width = "30" > < /img>
                <span>Startseite</span >
            </a>

            <a id = "me" href = "about.html"> 
                <img src = "files/i/me.svg" width = "30" > < /img>
                <span>Übermich < /span>
            </a >

            <a id = "dienst" href = "dienstleistungen.html" > 
                < img src = "files/i/dienst.svg" width = "30" > < /img>
                <span>Dienstleistungen</span > 
            < /a> 
            
            <a id = "form"href = "form.html" > 
                < img src = "files/i/form.svg" width = "30" > < /img>
                <span>Anfrage</span > 
            < /a>

        </div> 
    </div> 
</div>
`;

<!DOCTYPE html>
<html lang='de'>

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="files/i/favicon.svg" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>



<body id="first-body">
    <!--here should be the navigation with js-->
    <div class="body">
        <!--content-->
    </div>
</body>

<script type="text/javascript" src="navbar.js"></script>

</html>

Min Somai · Answer 3 · 2021-05-25T17:36:25.990

Including the above mentioned problem, your html is formatted incorrectly.

explanation:

Wrong:

  <div class = "dropbtn" id = "dropbtn" >

Right:

  <div class="dropbtn" id="dropbtn">

document.getElementById('first-body').innerHTML = `
<div class="navbar" >
    <div class="dropdown">
        <div class="dropbtn" id="dropbtn">
            <a id="menu"> 
                <img src="files/i/menu.svg" width="30"> </img>
                <span id="menu-text">Menü</span > 
            </a>
        </div>
        <div class="dropdown-content">
            <a id="home" href="index.html"> 
                <img src="files/i/home.svg" width="30"> </img>
                <span>Startseite</span>
            </a>

            <a id="me" href="about.html"> 
                <img src="files/i/me.svg" width="30"> </img>
                <span>Übermich </span>
            </a>

            <a id="dienst" href="dienstleistungen.html"> 
                <img src="files/i/dienst.svg" width="30"> </img>
                <span>Dienstleistungen</span > 
            </a> 
            
            <a id="form" href="form.html"> 
                <img src="files/i/form.svg" width="30"> </img>
                <span>Anfrage</span > 
            </a>

        </div> 
    </div> 
</div>
`;

<!DOCTYPE html>
<html lang='de'>

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="files/i/favicon.svg" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>



<body id="first-body">
    <!--here should be the navigation with js-->
    <div class="body">
        <!--content-->
    </div>
</body>

<script type="text/javascript" src="navbar.js"></script>

</html>

checkout this codepen

https://codepen.io/minsomai/pen/yLMXeQx

Insert block of HTML into HTML file using JS

3 Answers3