猿问

如何使用普通 JavaScript 从一个 html 文件中获取特定的 div 并将其放入

我有两个名为homepage.html&的 html 文件dashboard.html,位于同一文件夹下的同一级别。我只想获取特定的 div,因为我的主项目有很多 div。


这是代码homepage.html


<html>

    <head>

        <meta charset="UTF-8">

        <title>Homepage</title>

        <link rel="stylesheet" href="css/homepage.css">

    </head>

    <body>

        <div class="homepage-side-menu">

            <div id="homepage-home">

                <label>Home</label>

            </div>

            <div id="homepage-dashboard">

                <label>Dashboard</label>

            </div>

        </div>

        <div id="homepage-main-view"></div>

        <script src="js/homepage.js"></script>

    </body>

</html>

这是代码dashboard.html


<html>

    <head>

        <meta charset="UTF-8">

        <title>Dashboard</title>

        <link rel="stylesheet" href="css/dashboard.css">

    </head>

    <body>

        <div class="dashboard-side-menu"></div>

        <div id="dashboard-main-view"></div>

        <script src="js/dashboard.js"></script>

    </body>

</html>

我只想从 中获取内容并使用简单的 JavaScriptdiv class="homepage-side-menu">显示它。<div class="dashboard-side-menu"></div>


qq_花开花谢_0
浏览 148回答 4
4回答

慕村9548890

首先,您必须引用您想要使用的文件。然后你用getElementByClass()这是将 html 文件导入到另一个 html 中的方法<link href="homepage.html" rel="import" />或使用 JavaScript:<script>&nbsp;&nbsp; $(function(){&nbsp; &nbsp; $("#addContentFromAnotherHTML").load("homepage.html");&nbsp;&nbsp; });</script>你可以查看这样的内容:<body>&nbsp;&nbsp;<div id="addContentFromAnotherHTML"></div></body>像这样的东西:&nbsp;var classData =&nbsp; document.getElementsByClassName('homepage-side-menu');

斯蒂芬大帝

从 html5 开始你可以使用导入<link&nbsp;rel="import"&nbsp;href="/path/to/imports/stuff.html">在较旧的浏览器中,唯一的方法是使用 javascript(XHR、fetch 或 Jquery .load

HUX布斯

使用 jQuery 你可以将其添加到dashboard.html:<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script>&nbsp; &nbsp; $( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );</script>

慕慕森

您可以通过多种方式在多个页面之间共享 HTML 模板1. jQuery - AJAX load() 方法$(selector).load(URL,data,callback);该load()方法从 URL 加载数据并将返回的数据放入所选元素中。2. 服务器端包括使用一些服务器端编程语言<? php include 'header.php'; ?>3. 使用一些构建工具,如 gulp 或 grunt 或 webpack4. 使用 HTML 导入HTML 导入是一项令人兴奋的技术,它有望改变我们构建网站的方式。导入允许您将 HTML 文档包含在其他 HTML 文档中。
随时随地看视频慕课网APP

相关分类

Html5
我要回答