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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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代码质量36计
2012/09/05 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
js的一些常用方法小结
2011/06/29 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
js常用DOM方法详解
2017/02/04 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Django设置Postgresql的操作
2020/05/14 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
c++工程师面试问题
2013/08/04 面试题
小学生演讲稿
2014/01/12 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
保护环境建议书100字
2014/05/13 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
教师个人学习总结
2015/02/11 职场文书
员工试用期工作总结
2019/06/20 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电