javascript 顯示/隱藏，建立/刪除html元素用法實例詳解

顯示/隱藏

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('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=&#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中文網其他相關文章！