js实现创建删除html元素小结
作者:bea
如果我要创建一个div元素。 1.使用DOM对象创建: 使用document.createElement('div')方法创建元素。 2.使用JQuery创建: 使用$('<div>通过JQuery创建的新元素</div>')的方法直接创建元素。 如果需要将id是‘div2js'的div元素删除。 1.使用DOM对象 首先需要找到被删元素的父元素,通过父元素将其需要删除的子元素删除。 var el = document.getElementById
如果我要创建一个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>";
有用 | 无用
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>";
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 推荐10 个很棒的 jQuery 特效代码
- javascript日期格式化方法汇总
- jQuery插件Timelinr 实现时间轴特效
- jquery 实现输入邮箱时自动补全下拉提示功能
- 使用 JavaScript 进行函数式编程 (一) 翻译
- Clipboard.js 无需Flash的JavaScript复制粘贴库
- jQuery网页右侧广告跟随滚动代码分享
- jQuery+PHP星级评分实现方法
- 谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
- 通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
- 基于OL2实现百度地图ABCD marker的效果
- JS处理json日期格式化问题
- JS日期格式化之javascript Date format
- 详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
- RequireJS入门一之实现第一个例子
- 基于jQuery Bar Indicator 插件实现进度条展示效果
- jquery插件pagination实现无刷新ajax分页
- 浅谈Javascript中substr和substring的区别
- jQuery复制表单元素附源码分享效果演示