html代码怎么用js引入,htmljs引入

本文目录一览：

• 
  1、如何在 JS 中嵌入 HTML 代码
  


• 
  2、求助：HTML点击按钮调用JS文件或者直接调用JS代码？
  


• 
  3、HTML中引入css和js的方法
  

如何在 JS 中嵌入 HTML 代码

大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进，太难维护了。

我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：

var html = Template.load('/template/foo.html');

var target = document.getElementById('xxx');

target.innerHTML = html;

Template 是一个工具类，负责发送同步 XHR 请求并返回结果。

这样在开发的时候，模板文件和 JS 代码分离，非常好维护。

当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load('.*') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。

比如上面的代码被打包工具跑一下就变成了：

var html = "\n...\n"; // 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成

var target = document.getElementById('xxx');

target.innerHTML = html;

求助：HTML点击按钮调用JS文件或者直接调用JS代码？

HTML点击按钮调用JS文件或者直接调用JS代码的方法。

如下参考：

1.将这段代码保存到一个文件中，如下图所示。

2.请注意，您可以使用任何文本工具创建js文件，但是在保存它时，您需要将其后缀为.js。

3.将版本js文件保存为index.js。如果我们需要使用index。js。我们只需要调用它，不需要写一个新的js文件。

4.在HTML的头部部分引入js文件，具体代码如下图所示。

5.引用是一个双标签，所以如果没有内容，就必须完全写入。

6.如果你的js是从外部导入的，你不能在中间写js代码。

7.如果需要，您需要重新声明脚本标记，并在标记中编写js代码，如下图所示。

8.Javascriptjquery也是一样的规则，你必须在script标签中写代码。随着js文件的引入，你可以简单地在你想要的地方调用它。

HTML中引入css和js的方法

我们在HTML中经常需要引入CSS和JS文件，那么如何引入呢？下面我给大家演示一下。

工具/材料

Sublime Text

01

首先新建一个文件夹，在文件夹下面建立如下图所示的文件

02

接下来用Sublime Text打开HTML文件，写入HTML结构，如下图所示

03

然后我们在Head标签内用link标签引入CSS文件，如下图所示

04

最后用Script标签引入JS文件即可，如下图所示