js实现创建删除html元素小结
更新时间：2015年09月30日 10:58:23 投稿：hebedich
本文给大家简单介绍了下使用javascript和jquery实现创建删除html元素的方法，非常的实用，有需要的小伙伴可以参考下。
如果我要创建一个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实现倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
js字符串截取函数substr substring slice使用对比
字符串截取函数有substr、substring以及slice等等，下面将为大家介绍下各自的使用，感兴趣的朋友可以了解下2013-11-11
这篇文章主要介绍了js select支持手动输入实现代码,需要的朋友可以参考下2023-05-05
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。2017-07-07
这篇文章主要介绍了p5.js 毕达哥拉斯树的实现代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了详解JavaScript数组和字符串中去除重复值的方法,及利用各种限制条件对数组和字符串进行过滤,需要的朋友可以参考下2016-03-03
继承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的2017-06-06
js模拟滚动条(横向竖向)，需要的朋友可以参考一下2013-02-02
这篇文章主要为大家详细介绍了如何利用JS实现AI版自动玩贪吃蛇小游戏，文中的示例代码讲解详细，对我们学习JS游戏开发有一定帮助，需要的可以参考一下2022-06-06
这篇文章主要为大家详细介绍了JS轮播图的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论