js打開網頁的時候添加html代碼的簡單介紹

本文目錄一覽：

• 1、如何優雅的用js動態添加html代碼
• 2、如何用js動態寫入html代碼
• 3、使用js向網頁中寫入html內容
• 4、JS如何在頁面中插入HTML代碼
• 5、怎麼用JS獲取某一個指定頁面（非本頁面）的HTML代碼？
• 6、如何在 JS 中嵌入 HTML 代碼

如何優雅的用js動態添加html代碼

一、使用javascript 模板引擎

用javascript預編譯模版，就是動態修改模板文件使之成為一個可用的靜態HTML文件。 我平時會使用artTemplate，性能很好而且易上手。

編寫模板

使用一個type=”text/html”的script標籤存放模板：

script id=”test” type=”text/html”

h1{{title}}/h1

ul

{{each list as value i}}

li索引 {{i + 1}} ：{{value}}/li

{{/each}}

/ul

/script

渲染模板

var data = {

title: ‘標籤’,

list: [‘文藝’, ‘博客’, ‘攝影’, ‘電影’, ‘民謠’, ‘旅行’, ‘吉他’]

};

var html = template(‘test’, data);

document.getElementById(‘content’).innerHTML = html;

二、使用CoffeeScript

CoffeeScript支持類似於Python的跨行字元串，這樣很輕易的就能保持HTML結構的可讀性，而不需要使用「+」或者採用拼數組的形式。

str=”””

div class=”dialog”

div class=”title”

img src=”close.gif” alt=”關閉” /關閉

/div

div class=”content”

img src=”delete.jpg” alt=”” /

/div

div class=”bottom”

input id=”Button2″ type=”button” value=”確定” class=”btn”/

input id=”Button3″ type=”button” value=”取消” class=”btn”/

/div

/div

“””

如何用js動態寫入html代碼

所謂動態寫入方法就是源文件代碼中原來沒有內容或者需要重新改變此處的要顯示的文字或內容，需要用JavaScript代碼來實現。動態寫入是一種很常見常用的方法。

1、用innerHTML寫入html代碼：

div id=”abc”/div

scriptdocument.getElementById(“abc”).innerHTML=”要寫入的文字或內容”/script

2、appendChild() 方法：

ul id=”myList”liCoffee/liliTea/li/ul

button onclick=”myFunction()”點擊向列表添加項目/button

script

function myFunction(){

var node=document.createElement(“LI”);

var textnode=document.createTextNode(“Water”);

node.appendChild(textnode);

document.getElementById(“myList”).appendChild(node);

}

/script

使用js向網頁中寫入html內容

js可以向網頁中寫入html內容，方法是調用write方法向document的節點中寫入html元素

以下展示兩個實例

1.在網頁上寫入一個標題為hello的元素

效果如圖：

2.在網頁上寫入一個九九乘法表

在js中可以使用上面的 h1 hello /h1 這樣的開始標籤和閉合標籤在一起的標籤寫法，也可以將開始標籤和閉合標籤分開來寫，例如本例。

本例的邏輯是用table標籤建立一個表，然後用for循環分別計算九九乘法的結果，在寫入結果的前後用tr標籤形成一行，計算結果的時候用td標籤形成一列

效果圖：

通過chrome瀏覽器右鍵檢查，可以看到的確寫入了一個九九乘法表的table到網頁中

注意：

在進行字元串拼接的時候如果沒有處理好，會出現 SyntaxError: missing ) after argument list 的錯誤，需要謹慎對待，具體問題具體對待，解決方法可以參考下面的資料或者自行google

1. SyntaxError: missing ) after argument list

2. js中出現missing ) after argument list

3. JavaScript: SyntaxError: missing ) after argument list [closed]

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

步驟

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

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

怎麼用JS獲取某一個指定頁面（非本頁面）的HTML代碼？

1、在瀏覽器中打開要調試的網頁，然後點擊」F12 Developer Tools「，也可以使用快捷鍵F12。

2、彈出的工具窗口中，默認選擇是Dom Explorer功能，它會列出網頁的源代碼和CSS樣式列表。

3、使用元素定位功能選擇頁面中的一個元素，也會定位到源代碼中位置。

4、對定位到的文字修改CSS樣式，添加inline style，比如把字體變為紅色。

5、查看元素已經應用的CSS樣式，點擊”computed”菜單。

6、然後查看元素的布局信息，點擊”Layout”菜單。

如何在 JS 中嵌入 HTML 代碼

不能這麼寫的，兩者的執行位置不一樣，JSP在伺服器，JS在客戶端。

JSP代碼最後都是要編譯成Servlet在服務端執行的，然後把HTML格式的執行結果輸出到客戶端，而JavaScript是要發送到客戶端解釋執行的，兩者的執行一個在前，一個在後，沒法嵌套，即：

JSP-Servlet(在伺服器端執行)-HTML(包括JS)-客戶端(解釋執行JS並渲染HTML)

不過JSP代碼倒是可以嵌套在JavaScript中，因為在將執行結果(HTML)返回給用戶之前，JSP會在伺服器端執行，而嵌套在JavaScript中的JSP代碼就會替換為執行結果，如：

script type=”text/javascript”

function test(){

var i=%=request.getLocalPort()%;

alert(i);

}

/script

如果實在要寫的話可以通過JSP的內置對象out來把JavaScript代碼輸出到客戶端，但這樣還是走的JSP-Servlet-HTML的流程，等於多走了一步，還不如直接寫在HTML里.

下面給出一個例子：

%

out.println(“script type=’text/javascript’alert(‘Hello’)/script”);

%