JScript中innerHTML的例子
Ghost 发表于 [2005-12-16 11:33]
使用JScript的innerHTML属性，可以获取或设置位于指定的 HTML 服务器控件的开始标记和结束标记之间的内容。这个属性现在在页面设计中很流行，因为它可以让静态的页面也能实现动态的效果。
如你可以让静态的页面也实现像ASP页面中的将顶部和底部分别存成一个文件再用include包含到页面中，实现模版的功能。下面看看如何实现：
先做好顶部和底部，如下：
-----------------------------顶部 top.html-------------------------------
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">
<tr>
<td>这是顶部</td>
</tr>
</table>
-----------------------------------------------------------------
-----------------------------底部 bottom.html-------------------------------
<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">
<tr>
<td>这是底部</td>
</tr>
</table>
-----------------------------------------------------------------
然后将这两部分的代码分别用下面的格式存成JS文件：
-----------------------------顶部 top.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">';
str=str+' <tr>';
str=str+' <td>这是顶部</td>';
str=str+' </tr>';
str=str+'</table>';
top.innerHTML=str;
-----------------------------------------------------------------
-----------------------------底部 bottom.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">';
str=str+' <tr>';
str=str+' <td>这是底部</td>';
str=str+' </tr>';
str=str+'</table>';
bottom.innerHTML=str;
-----------------------------------------------------------------
下面我们看看要调用这两个部分的文件：
---------------------------------try.html--------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JScript中innerHTML的例子</title>
</head>
<body>
<!-- 顶部开始 -->
<div id="top"></div>
<!-- 顶部结束 -->
<!-- 主要内容开始 -->
页面主要内容
<!-- 主要内容结束 -->
<!-- 底部开始 -->
<div id="bottom"></div>
<!-- 底部结束 -->
<script language="javascript" src="top.js"></script>
<script language="javascript" src="bottom.js"></script>
</body>
</html>
-----------------------------------------------------------------
这样当你打开try.html的时候，就可看到顶部和底部都已经自动加进来了。
需要注意的是，在JS文件中的innerHTML前面的id名与要调用的页面中的id名要一至。例子中的top和bottom。
分享到：
相关推荐
"jscript 500个例子" 是一个旨在帮助初学者掌握JavaScript基础和进阶技巧的资源集合，通过大量的实践示例来深入理解其语法和用法。 在学习这500个例子时，你可以按照以下几个关键知识点进行系统性的学习： 1. **...
这些例子可以帮助你更好地理解JavaScript的工作原理，并将其应用到实际项目中。 jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理、动画制作和Ajax交互。"jQueryAPI-100214.chm"包含了完整的jQuery API...
在这个例子中，可能涉及到以下几个关键知识点： 1. **ASP基本结构**：ASP页面通常包含HTML标记、脚本代码以及服务器端的ASP指令。脚本代码可以在服务器端执行，并返回结果到客户端浏览器。 2. **ASP内置对象**：...
在这个例子中，我们将创建一个ASP文件（例如：getAjaxName.asp），来处理整数加法的逻辑。在`getAjaxName.asp`中，可以创建一个函数，接收两个参数（通过GET请求传递过来的整数），然后返回它们的和： ```vbscript ...
在这个例子中，VBScript被用来根据用户输入或预设参数动态生成HTML和JavaScript代码。具体来说，代码中的`for`循环负责生成一系列的JavaScript语句，每个语句都调用`$((a*100/fs)%>)`函数，该函数会更新进度条的状态...
在这个例子中，当请求完成并成功收到响应时，JavaScript会解析服务器返回的JSON数据，并更新ID为`dataSection`的DOM元素内容。 至于`data.mdb`，这是Microsoft Access数据库文件，用于存储论坛的相关数据，如帖子、...
题目中给出了几个可能的自闭合HTML标签的例子，具体分析如下： - **选项A**: `<TEXTAREA>` - 不是自闭合标签。 - **选项B**: `<INPUT type="text" />` - 是自闭合标签，表示一个文本输入框。 - **选项C**: `...
5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+SQL版 6.2 asp+xml+sql版 6.3 java+sql或者java+sql+xml 7、无边框效果的制作 8、连动下拉框技术 9...
document.documentElement.innerHTML 第一个style标签 document.styleSheets[0] style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时，页面往往重置到页首端。 ()">word 上一网页...