Question

使用 JS 将 HTML 块插入 HTML 文件中

2021-05-25

912

javascript 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：无法设置 null 的属性“innerHTML”：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>

是否可能无法使用带有 ID 的 <body> 标签？

如果我将 <script> 放在 </body> ，它看起来是这样的：

Answer 1

您缺少的是一个 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' ––>
    <div id="first-body">
    </div>

Answer 2

它确实有效，我看不出这里有什么问题，除了你应该像下面的例子一样在 HTML 文件的末尾导入 JS 文件。因为如果你有一个 <body> ，id 为 first-body ，它确实有效，请查看下面的示例代码。

如果你不理解代码，请阅读： HTML DOM innerHTML 属性

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>

Answer 3

包括上面提到的问题，你的html格式不正确。

解释：

错误：

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

正确：

<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