`

JScript中innerHTML的例子

阅读更多
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个例子

    "jscript 500个例子" 是一个旨在帮助初学者掌握JavaScript基础和进阶技巧的资源集合,通过大量的实践示例来深入理解其语法和用法。 在学习这500个例子时,你可以按照以下几个关键知识点进行系统性的学习: 1. **...

    JavaScript详细资料及手册

    这些例子可以帮助你更好地理解JavaScript的工作原理,并将其应用到实际项目中。 jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画制作和Ajax交互。"jQueryAPI-100214.chm"包含了完整的jQuery API...

    ASP源码—Ajax网页交互动态添加删除数据一例.zip

    在这个例子中,可能涉及到以下几个关键知识点: 1. **ASP基本结构**:ASP页面通常包含HTML标记、脚本代码以及服务器端的ASP指令。脚本代码可以在服务器端执行,并返回结果到客户端浏览器。 2. **ASP内置对象**:...

    asp ajax get 实现整数加法过程

    在这个例子中,我们将创建一个ASP文件(例如:getAjaxName.asp),来处理整数加法的逻辑。在`getAjaxName.asp`中,可以创建一个函数,接收两个参数(通过GET请求传递过来的整数),然后返回它们的和: ```vbscript ...

    asp实现进度条的测试网速的代码

    在这个例子中,VBScript被用来根据用户输入或预设参数动态生成HTML和JavaScript代码。具体来说,代码中的`for`循环负责生成一系列的JavaScript语句,每个语句都调用`$((a*100/fs)%&gt;)`函数,该函数会更新进度条的状态...

    XMLHTTP无刷新自动实时更新数据

    在这个例子中,当请求完成并成功收到响应时,JavaScript会解析服务器返回的JSON数据,并更新ID为`dataSection`的DOM元素内容。 至于`data.mdb`,这是Microsoft Access数据库文件,用于存储论坛的相关数据,如帖子、...

    javascript面试题目

    题目中给出了几个可能的自闭合HTML标签的例子,具体分析如下: - **选项A**: `&lt;TEXTAREA&gt;` - 不是自闭合标签。 - **选项B**: `&lt;INPUT type="text" /&gt;` - 是自闭合标签,表示一个文本输入框。 - **选项C**: `...

    在b/s开发中经常用到的javaScript技术

    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...

    js使用小技巧

    document.documentElement.innerHTML 第一个style标签 document.styleSheets[0] style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时,页面往往重置到页首端。 ()"&gt;word 上一网页...

Global site tag (gtag.js) - Google Analytics