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 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 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中抽象类、接口的区别与选择分析
2016/03/29 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python中reload(module)的用法示例详解
2017/09/15 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Python实现手绘图效果实例分享
2020/07/22 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
酒鬼酒广告词
2014/03/21 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
Python类方法总结讲解
2021/07/26 Python