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 相关文章推荐
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
React简单介绍
May 24 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
vue select选择框数据变化监听方法
Aug 24 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 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 中文乱码解决办法总结分析
2009/07/30 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python程序如何进行保存
2020/07/03 Python
opencv 阈值分割的具体使用
2020/07/08 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
毕业学生推荐信
2013/12/01 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
房地产融资计划书
2014/01/10 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
计算机网络专业求职信
2014/06/05 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
开会通知短信大全
2015/04/20 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python