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的可多选的下拉列表框
Jul 20 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
Javascript高级技巧分享
Feb 25 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
分享Javascript实用方法二
Dec 13 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
浅谈react useEffect闭包的坑
Jun 08 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解析RSS的方法
2015/03/05 PHP
PHP之预定义接口详解
2015/07/29 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
深入理解JavaScript中Ajax
2016/08/02 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
玩转python爬虫之正则表达式
2016/02/17 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python魔术方法专题
2020/06/19 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
《争吵》教学反思
2014/02/15 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
支部鉴定材料
2014/06/02 职场文书
公司应聘自荐书
2014/06/14 职场文书
亲属关系公证书样本
2015/01/23 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Java死锁的排查
2022/05/11 Java/Android