如何使用普通 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