如何使用普通 JavaScript 从一个 html 文件中获取特定 div 并将其放置在其他 html 文件中？
[英]How to fetch a particular div from one html file and place it in other html file using normal JavaScript?
问题描述
I have two html files named homepage.html & dashboard.html at same level under same folder.
我在同一文件夹下的同一级别有两个名为homepage.html和dashboard.html html 文件。 I only want to fetch a particular div as my main project has a lot of divs.我只想获取一个特定的 div，因为我的主要项目有很多 div。
Here's the code of homepage.html这是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>
And here's the code of dashboard.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>
I want to only fetch the content from the div class="homepage-side-menu"> and show it under <div class="dashboard-side-menu"></div> using simple JavaScript.我只想从div class="homepage-side-menu">获取内容并使用简单的 JavaScript 在<div class="dashboard-side-menu"></div>下显示它。
4 个解决方案
解决方案1
1 已采纳 2020-03-06 04:34:37
First you have to refer the file which you want to consume.首先，您必须引用要使用的文件。 then you use getElementByClass()然后你使用getElementByClass()
here is how you import the html file into another html这是将 html 文件导入另一个 html 的方法
<link href="homepage.html" rel="import" />
or using javascript:或使用 javascript：
<script>
$(function(){
$("#addContentFromAnotherHTML").load("homepage.html");
});
</script>
and you can view something like this:您可以查看如下内容：
<body>
<div id="addContentFromAnotherHTML"></div>
</body>
something like this:像这样：
var classData = document.getElementsByClassName('homepage-side-menu');
解决方案2
0 2020-03-06 04:29:01
Since html5 you can use imports从 html5 开始，您可以使用导入
<link rel="import" href="/path/to/imports/stuff.html">
In older browsers the only way is using javascript (XHR, fetch, or Jquery .load在旧浏览器中，唯一的方法是使用 javascript（XHR、fetch 或 Jquery .load
解决方案3
0 2020-03-06 04:36:10
Using jQuery you could add this to dashboard.html :使用 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>
解决方案4
0 2020-03-06 05:21:41
There are several ways in which you can share HTML template across several pages您可以通过多种方式在多个页面之间共享 HTML 模板
1. jQuery - AJAX load() Method 1. jQuery - AJAX load() 方法
$(selector).load(URL,data,callback);
The load() method loads data from URL and puts the returned data into the selected element. load()方法从 URL 加载数据并将返回的数据放入所选元素。
Read more about it here在此处阅读更多相关信息
2. Server side inclueds using some server side programming languages 2. 服务端包括使用一些服务端编程语言
<?
php include 'header.php';
?>
Read more about it here在此处阅读更多相关信息
3. Using some build tools like gulp or grunt or webpack 3. 使用一些构建工具，如 gulp 或 grunt 或 webpack
https://www.npmjs.com/package/file-include-webpack-plugin https://www.npmjs.com/package/file-include-webpack-plugin
https://www.npmjs.com/package/gulp-file-include https://www.npmjs.com/package/gulp-file-include
4. Using HTML imports 4. 使用 HTML 导入
HTML imports is an exciting technology that promises to change how we build websites. HTML 导入是一项激动人心的技术，有望改变我们构建网站的方式。 Imports allow you to include HTML documents within other HTML documents.导入允许您在其他 HTML 文档中包含 HTML 文档。
Read more about it here在此处阅读更多相关信息
https://www.html5rocks.com/en/tutorials/webcomponents/imports/ https://www.html5rocks.com/en/tutorials/webcomponents/imports/
https://blog.teamtreehouse.com/introduction-html-imports https://blog.teamtreehouse.com/introduction-html-imports
This one is recomended but not works with older browser这个是推荐的，但不适用于旧浏览器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.