js实现创建删除html元素小结


Posted in Javascript onSeptember 30, 2015

如果我要创建一个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 相关文章推荐
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
node.js下LDAP查询实例分享
Sep 30 #Javascript
Javascript中replace()小结
Sep 30 #Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 #Javascript
谈谈JavaScript异步函数发展历程
Sep 29 #Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 #Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 #Javascript
jQuery中的ajax async同步和异步详解
Sep 29 #Javascript
You might like
PHP 日,周,月点击排行统计
2012/01/11 PHP
php自定义session示例分享
2014/04/22 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php实现文章评论系统
2019/02/18 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python过滤列表用法实例分析
2016/04/29 Python
你应该知道的python列表去重方法
2017/01/17 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python发展史及网络爬虫
2019/06/19 Python
Pytorch之parameters的使用
2019/12/31 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
20岁生日感言
2014/01/13 职场文书