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 eval和JSON之间的联系
Dec 31 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
PHP面试题集
2016/12/18 面试题
护士自我鉴定范文
2013/10/06 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书