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

来源：动视网责编：小采时间：2020-11-27 20:16:01

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

javascript显示/隐藏，创建/删除html元素用法实例详解:显示/隐藏1。编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")"":"none";} fun

推荐度：

点击下载本文 文档为doc格式

导读javascript显示/隐藏，创建/删除html元素用法实例详解:显示/隐藏1。编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")"":"none";} fun

显示/隐藏

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元素用法实例详解

推荐度：

点击下载本文 文档为doc格式

标签：创建元素新建

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐