如何使用普通 JavaScript 从一个 html 文件中获取特定 div 并将其放置在其他 html 文件中？

Question

我在同一文件夹下的同一级别有两个名为homepage.html和dashboard.html 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>

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

Answer 1

首先，您必须引用要使用的文件。 然后你使用getElementByClass()

这是将 html 文件导入另一个 html 的方法

<link href="homepage.html" rel="import" />

或使用 javascript：

<script> 
  $(function(){
    $("#addContentFromAnotherHTML").load("homepage.html"); 
  });
</script>

您可以查看如下内容：

<body> 
 <div id="addContentFromAnotherHTML"></div>
</body>

像这样：

 var classData =  document.getElementsByClassName('homepage-side-menu');

Answer 2

从 html5 开始，您可以使用导入

<link rel="import" href="/path/to/imports/stuff.html">

在旧浏览器中，唯一的方法是使用 javascript（XHR、fetch 或 Jquery .load

Answer 3

使用 jQuery，您可以将其添加到 dashboard.html ：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>

Answer 4

您可以通过多种方式在多个页面之间共享 HTML 模板

1. jQuery - AJAX load() 方法

$(selector).load(URL,data,callback);

load()方法从 URL 加载数据并将返回的数据放入所选元素。

在此处阅读更多相关信息

2. 服务端包括使用一些服务端编程语言

<?
php include 'header.php';
?>

在此处阅读更多相关信息

3. 使用一些构建工具，如 gulp 或 grunt 或 webpack

https://www.npmjs.com/package/file-include-webpack-plugin

https://www.npmjs.com/package/gulp-file-include

4. 使用 HTML 导入

HTML 导入是一项激动人心的技术，有望改变我们构建网站的方式。 导入允许您在其他 HTML 文档中包含 HTML 文档。

在此处阅读更多相关信息

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

https://blog.teamtreehouse.com/introduction-html-imports

这个是推荐的，但不适用于旧浏览器

如何使用普通 JavaScript 从一个 html 文件中获取特定 div 并将其放置在其他 html 文件中？

问题描述

4 个解决方案

解决方案1
1 已采纳 2020-03-06 04:34:37

解决方案2
0 2020-03-06 04:29:01

解决方案3
0 2020-03-06 04:36:10

解决方案4
0 2020-03-06 05:21:41

如何使用普通 JavaScript 从一个 html 文件中获取特定 div 并将其放置在其他 html 文件中？

问题描述

4 个解决方案

解决方案1 1 已采纳 2020-03-06 04:34:37

解决方案2 0 2020-03-06 04:29:01

解决方案3 0 2020-03-06 04:36:10

解决方案4 0 2020-03-06 05:21:41

解决方案1
1 已采纳 2020-03-06 04:34:37

解决方案2
0 2020-03-06 04:29:01

解决方案3
0 2020-03-06 04:36:10

解决方案4
0 2020-03-06 05:21:41