我想要将一些HTML代码从一个页面移动到另一个页面,不想再次键入该行代码。我该如何移动它?例如:
page1.html:
<div class="container">
<img src="img/img1.jpg" alt="image">
<div class="container_para">
<p>this is image tag</p>
</div>
</div>
page2.html:
<div class="page2">
<img src="img/img2.jpg" alt="image">
</div>
如何使用JavaScript将类container_para
的所有内容移动到page2.html
?
发布于 2018-08-14 05:25:13
假设这两个页面都在同一个域上,则将此放在Page2.html上的结束body标记之前:
<script>
var req = new XMLHttpRequest();
req.open('GET', 'page1.html', false);
req.send(null);
if(req.status == 200) {
var parser = new DOMParser();
var doc = parser.parseFromString(req.responseText, "text/html")
var eles = doc.getElementsByClassName("container_para");
var container = document.getElementsByClassName("page2");
container[0].innerHTML = container[0].innerHTML + eles[0].innerHTML;
}
</script>
发布于 2018-08-14 05:18:55
在HTML中,这是不可能的。在PHP中你可以做到。
安装wamp或xamp服务器并测试php文件
container.html
<div class="container_para">
<p>this is image tag</p>
</div>
Page1.php
<div class="container">
<img src="img/img1.jpg" alt="image">
<?php include 'container.html';?>
</div>
Page2.php
<div class="page2">
<img src="img/img2.jpg" alt="image">
<?php include 'container.html';?>
</div>
发布于 2018-08-14 05:32:05
您可能正在请求模板。模板允许您只编写一次HTML,然后在整个站点中重用它。有很多方法可以做到这一点,无论是在前端还是后端。
看看这个集合,对于初学者:https://colorlib.com/wp/top-templating-engines-for-javascript/
https://stackoverflow.com/questions/51830314
复制相似问题