最近对JavaScript非常感兴趣，可能因为是它和JAVA差不多吧。原来看到一些网页上的隐显效果，心理面真是佩服，心想自己能够做就爽了。现在对innerHTML有一点的了解，做这个东西就相对简单了，下面就是我自己弄来玩的一个例子，我相信你看了过后，如果你原来也没有做过，那我保证你说“原来这么简单！！！”：
这里要补充说明一点，就是不同的浏览器对Javascript的支持不同，我这里用了FireFox和微软的浏览器比较了一下，有些能够在微软的浏览器实现效果下，在FireFox下不一能够实现。
<html>
<head>
<title>
</title>
<script>
//这种方式是通过显示条件判定来决定innerHTML的显示内容
//这里显示的内容是原来不存在的。这个方法只支持微软的浏览器
function tClick(id)
{
var str='';
if(id==1)
{
str='<a href=# onclick=t(2)><--</a>';
str+='<br> ';
str+='1、你好';
str+='<br> ';
str+='2、欢迎光临';
}
else
{
str='<a href=# onclick=t(1)>--></a>';
}
window.testClick.innerHTML=str;
}
//这种方式通过条件确定，是否把已经存在的东西显示出来。FireFox可以支持该方法，为了程序的移植性，最好选用这一种方式。
function hello(obj,idStr)
{
var d=document.getElementById(idStr);
if(d.style.display=='none')
{
d.style.display='block';
obj.innerHTML='回去';
}
else
{
d.style.display='none';
obj.innerHTML='出来';
}
}
</script>
</head>
<body>
<table>
<tr>
<td id=testClick>
<a href=# onclick=tClick(1)>--></a>
</td>
</tr>
<tr>
<td>
<a href=# onclick=hello(this,'helloddd')>出来</a>
<dd id=helloddd style=display:none>
你好
</dd>
</td>
</tr>
</body>
</html>
分享到：
相关推荐
innerHTML-outerHTML-innerTEXT
innerHTML的简单应用
实现百度效果 自动显示数据库中的数据，主要代码如下： <script type='text/javascript' src='/excelDemo/dwr/interface/jshow.js'></script> <script type='text/javascript' src='/excelDemo/dwr/engine.js'>...
超全面javaweb第4天-_08_innerHTML属性
python的xpath没有获取div标签内html内容的功能，也就是获取div或a标签中的innerhtml，写了个小程序实现一下： 源代码 [webadmin@centos7 csdnd4q] #162> vim /mywork/python/csdnd4q/z040.py #去掉最外层标签，...
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
收集一些基础的Ajax学习知识实例，这些实例基于HTML静态网页格式，并配合封装好的Ajax操作类，实现一些不同的页面无刷新操作效果，其中封装类中的一些代码释义摘录如下： 1、回调函数，用于处理所有方法中function...
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
博文链接：https://aideqianfang.iteye.com/blog/246585
主要介绍了用原生 JS 实现 innerHTML 功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Innerself – 使用innerHTML将React / Redux转换成50行代码
js中innerHTML与innerText的用法与区别
解决ajax返回innerHTML中javascript不能运行问题
JS多选下拉框，实现多选。点击显示下拉。 <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status').innerHTML = $('status').innerHTML=...
IE6-IE9中tbody的innerHTML不能赋值，重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </...
NULL 博文链接：https://newtime.iteye.com/blog/461146
代码如下:”headtop”></div> 而flash幻灯的位置，也只有一行 代码如下:”index_slide”></div> 对于这种需要耗时的代码，最好是放在页面最后面加载，然后用innerhtml的方法加载到对应位置，达到加快页面打开速度...
今天遇到jquery中的html方法使用不了，只能用完最基本的innerHTML把内容展示出来。具体原因还没找到，肯定跟内容有关，展示不了的html放上来供以后检查原因，是我收到csdn的一封邮件。 <!DOCTYPE ...
调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件