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中常见陷阱小结
Apr 27 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
小程序实现单选多选功能
Nov 04 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
vue实现移动端图片上传功能
Dec 23 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 中的一些经验积累
2006/10/09 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python json.loads兼容单引号数据的方法
2018/12/19 Python
python虚拟环境迁移方法
2019/01/03 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
泰国第一在线超市:Tops
2021/02/13 全球购物
一道Delphi上机题
2012/06/04 面试题
创先争优制度
2014/01/21 职场文书
场地使用证明模板
2014/10/25 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
ES6 解构赋值的原理及运用
2021/05/25 Javascript
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python