首页  >  文章  >  web前端  >  javascript 显示/隐藏,创建/删除html元素用法实例详解

javascript 显示/隐藏,创建/删除html元素用法实例详解

伊谢尔伦
伊谢尔伦原创
2017-07-18 15:32:402033浏览

显示/隐藏

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(&#39;menu&#39;)" value="显示/隐藏"/> 
<a href="#" onclick="display(&#39;menu&#39;)" >显示/隐藏</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创建:

使用$('dc6dce4a544fdca2df29d5ac0ea9906b通过JQuery创建的新元素16b28748ea4df4d9c2150843fecfba68')的方法直接创建元素。

如果需要将id是‘div2js'的div元素删除。

1.使用DOM对象

首先需要找到被删元素的父元素,通过父元素将其需要删除的子元素删除。

var el = document.getElementById(&#39;div2js&#39;);
 el.parentNode.removeChild(el);

2.使用JQuery

直接找到并删除。

$(&#39;#div2js&#39;).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=&#39;false.jpg&#39; alt=&#39;请输入正确的姓名&#39;/>请输入正确的姓名";
        }
         
     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=&#39;true.gif&#39; alt=&#39;该用户名输入正确&#39;/>该用户名输入正确";
          }
}
</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元素用法实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn