本文目录一览:
- 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