javascript显示/隐藏,创建/删除html元素用法实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript显示/隐藏,创建/删除html元素用法实例详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2607字,纯文字阅读大概需要4分钟。
内容图文
显示/隐藏1。编写js函数
<script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script>
2. 要显示/隐藏的html元素加上 id 属性
<table> <tr id="menu" > <td>控制这个tr的显示/隐藏</td> </tr> </table>
3,添加按钮,链接等触发 js 函数
<input type="button" onclick="display('menu')" value="显示/隐藏"/> <a href="#" onclick="display('menu')" >显示/隐藏</a> javascript显示隐藏层<div id="layer" style="display:none;">广告</div> <input type="botton" onclick="display(layer)">
二:javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
方法一:
document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible";
方法二:
document.all["PanelSMS"].style.display="none"; document.all["PanelSMS"].style.display="inline";
方法一隐藏后 页面的位置还被控件占用 只是不显示
方法二隐藏后 页面的位置不被占用
创建/删除
如果我要创建一个div元素。
1.使用DOM对象创建:
使用document.createElement('div')方法创建元素。
2.使用JQuery创建:
使用$('<div>通过JQuery创建的新元素</div>')的方法直接创建元素。
如果需要将id是‘div2js'的div元素删除。
1.使用DOM对象
首先需要找到被删元素的父元素,通过父元素将其需要删除的子元素删除。
var el = document.getElementById('div2js'); el.parentNode.removeChild(el);
2.使用JQuery
直接找到并删除。
$('#div2js').remove();
最后我们来看个实例
<script type="text/javascript" language="Javascript"> function InputOnBlur() { var name=document.getElementById("name").value; if(name.length >10 || name.length<2) { var element=document.getElementById("message"); if(element) { //alert(element.parentNode.innerHTML); element.parentNode.removeChild(element); } var MySpan=document.createElement("span"); document.getElementById("containers").appendChild(MySpan); MySpan.id = "message"; MySpan.innerHTML = "<img src='false.jpg' alt='请输入正确的姓名'/>请输入正确的姓名"; } else{ var element=document.getElementById("message"); if(element) { //alert(element.innerHTML); element.parentNode.removeChild(element); } var MySpan=document.createElement("span"); document.getElementById("containers").appendChild(MySpan); MySpan.id = "message"; MySpan.innerHTML = "<img src='true.gif' alt='该用户名输入正确'/>该用户名输入正确"; } } </script> <div> 姓名:<input id="name" type="text" onblur="InputOnBlur()" /><span id="containers"></span></div> <script language="javascript"> document.getElementById("containers").innerHTML = "<font color=red>请输入姓名</font>";
以上就是javascript 显示/隐藏,创建/删除html元素用法实例详解的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的javascript显示/隐藏,创建/删除html元素用法实例详解全部内容,希望文章能够帮你解决javascript显示/隐藏,创建/删除html元素用法实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。