时间戳

首页 > 解决方案 > 使用 JS 将 HTML 块插入 HTML 文件

javascript - 使用 JS 将 HTML 块插入 HTML 文件

问题描述

我想使用 JS 将这个 HTML 块插入到另一个 HTML 文件中，因为如果我需要编辑导航，我可以在 JS 文件中编辑它：

<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>

最简单的方法是什么？我已经搜索过了，但我只看到了可以独自完成的事情。是否存在一种简单的方法来做到这一点？

我已经尝试过了，但我得到一个错误（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>
`;

在我要插入的 HTML 文件中，我使用这个：<script type="text/javascript" src="navbar.js"></script>

我的 HTML 文件：

<!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>

有没有可能，我不能使用<body>带有 ID 的标签？

如果我把<script>之前或之后</body>，它看起来像这样：

移动脚本标签后的页面截图

标签： javascripthtml

解决方案

您所缺少的只是一个 ID 为“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' ––&gt;
    <div id="first-body">
    </div>

推荐阅读