js內嵌html代碼,js內嵌網頁

本文目錄一覽：

• 1、如何在 JS 中嵌入 HTML 代碼
• 2、JS如何在頁面中插入HTML代碼
• 3、JavaScript中嵌套HTML代碼
• 4、怎麼把調用的js代碼放在html中
• 5、為什麼JavaScript要嵌入html？
• 6、如何用js動態寫入html代碼

如何在 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”);

%

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

在JS中插入短的HTML代碼，可以通過先使用一個函數來包着，你要添加的HTMl代碼，然後在使用innerHTML這個函數提取就行，在你的HTMl中添加一個事件就行，然後調用這個函數就行了，具體的我提供例子給你看下：

html

head

script

function

insert(){

var

insertText

=

“tabletrtdany

thing/td/tr/table”;

document.getElementById(“insert”).innerHTML(insertText);

}

/script

/head

body

button

onclick=”insert()”Insert/button

div

id=”insert”/div

/body

/html

JavaScript中嵌套HTML代碼

通過嵌套iframe 實現嵌套html頁面

script type=”text/javascript”

$(function () {

document.getElementById(“ifm”).src =””;//Url地址

$(“#ifm”).load(function () {

var h = document.body.clientHeight;

var w = document.body.clientWidth;

document.getElementById(“ifm”).height = h + “px”;

document.getElementById(“ifm”).width = w + “px”;

});

})

/script

body style=”overflow-y:hidden;overflow-x:hidden”

div id=”pageone” style=””

iframe name=”ifm” id=”ifm” scrolling=”yes” style=”background-color: transparent;” marginwidth=”0″ marginheight=”0″ frameborder=”0″

/iframe

/div

/body

怎麼把調用的js代碼放在html中

在HTML中加入JavaScript腳本

JavaScript採用的格式如下：

Script Language=”JavaScript”

JavaScript 語句

/Script

把上述語句放在HTML的head與/head之間，也可放在body與/body之 間。將JavaScript標識放置Head… /Head在頭部之間，使之在主頁和其餘部分代碼之前裝載，從而可使代碼的功能更強大；將JavaScript標識放置 在Body… /Body主體之間以實現某些部分動態地創建文檔。

例子：在網頁上顯示“你好！”。

html

body

Script Language=”JavaScript”

alert(“你好！”)

/script

/body

/html

在瀏覽器地址欄直接執行JavaScript腳本

也可以在瀏覽器的地址欄中輸入JavaScript語句，由瀏覽器直接執行。

如輸入：javascript:alert(200*75)

四、調用JavaScript文件

可以將純JavaScript的語句另外保存在一個”*.js”的文件中，需要時再調用。

例子：調用test.js文件，顯示提示。

html

body

調用test.js文件

script language=”JavaScript” src=”test.js”

/script

/body

/html

test.js的文件內容如下：

alert(“這是被調用的語句。”)

為什麼JavaScript要嵌入html？

JavaScript作為客戶端的腳本語言，主要的用途就是幫助HTML處理部分交互邏輯。JavaScript語言同其他腳本語言一樣，通過控制語句、函數、對象方法屬性等來實現編程。

根據JavaScript在HTML中加載方式的不同，嵌入方式可以分為內部引用、外部引用和內聯引用。

1．內部引用

通過Script/Script標記嵌入JavaScript，這是最常用也是最簡便的一種引用方式，可以在HTML代碼的任何位置嵌入

head

script

type=”text/javascript”

document.write(“Hello world!”);

/script/head

2．外部引用

通過引用HTML文件的方式加載JavaScript文件，這種方式可以使HTML代碼更簡潔，方便代碼復用。

head

script

type=”text/javascript” src=”路徑” /script

/head

可以放在head標籤內，如果是非關鍵javascript代碼可以放在後面.

3．內聯引用

通過HTML標記的觸發事件屬性實現，比如通過onclick事件直接調用JavaScript代碼。在HTML中有很多這樣的事件屬性，通常都是配合JavaScript這樣的前端腳本語言來使用，示例代碼如下：

input type=”button” value=”” οnclick=”alert（’你內聯引用的方式調用了JavaScript代碼’）;”

如何用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