javascript 显示/隐藏，创建/删除html元素用法实例详解-js教程-PHP中文网

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

伊谢尔伦

发布： 2017-07-18 15:32:40

原创

1787人浏览过

显示/隐藏

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创建：

使用$('

通过JQuery创建的新元素

')的方法直接创建元素。

如果需要将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中文网其它相关文章！