如何利用html+js建立模板

最新推荐文章于 2026-05-14 16:52:26 发布

原创最新推荐文章于 2026-05-14 16:52:26 发布 · 5.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在网页开发中复用导航栏的方法，通过创建一个独立的导航栏文件和一个用于导入HTML模板的公共函数，可以轻松地在多个页面间共享相同的导航栏设计。

每次写页面的时候导航栏都得重复粘贴，如果能用模板解决就再好不过了

首先，我有个公共的导航栏---nav.html

其次（重点！！！），写个公共函数---在common.js中，用于导入html模板

function importHTML(strNode){
	var link=document.querySelector("link[rel=import]");
	var content=link.import;//获取某个页面的文档流
	var el=content.querySelector(strNode);//获取某个标签下的所有内容
	document.body.appendChild(el.cloneNode(true));//将获取到的内容贴到当前页面
}

最后，在其他页面导入导航栏