html代碼怎麼用js引入,在html中引入js的三種方法

本文目錄一覽：

• 1、JS如何在頁面中插入HTML代碼
• 2、HTML中引入css和js的方法
• 3、HTML如何插入js？
• 4、如何在 JS 中嵌入 HTML 代碼
• 5、求助：HTML點擊按鈕調用JS文件或者直接調用JS代碼？

JS如何在頁面中插入HTML代碼

步驟

1、新建一網頁文件「sample.html”,用記事本或其它文本編輯軟體（如UltraEdit）打開，輸入如圖所示的HTML代碼。該網頁文件包括一個藍色的字元串，一個按鈕和一個文本框。

2、JS代碼可插入到」head”標籤之間。編寫Javascript代碼，代碼內容如圖所示，並將該段代碼複製到網頁文件」sample.html「中標籤」head”和「/head之間，然後查看網頁文件的顯示內容。

HTML中引入css和js的方法

我們在HTML中經常需要引入CSS和JS文件，那麼如何引入呢？下面我給大家演示一下。

工具/材料

Sublime Text

01

首先新建一個文件夾，在文件夾下面建立如下圖所示的文件

02

接下來用Sublime Text打開HTML文件，寫入HTML結構，如下圖所示

03

然後我們在Head標籤內用link標籤引入CSS文件，如下圖所示

04

最後用Script標籤引入JS文件即可，如下圖所示

HTML如何插入js？

插入js的方法有很多種，例如，在html的head標籤內通過script標籤來寫或者在body結束標籤前添加script標籤來寫，或者引入外部的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文件的引入，你可以簡單地在你想要的地方調用它。