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的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
Angular排序实例详解
2017/06/28 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
ng-alain表单使用方式详解
2018/07/10 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python 如何设置守护进程
2020/10/29 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
销售文员岗位职责
2013/11/29 职场文书
校园活动策划书范文
2014/01/10 职场文书
工作保证书范文
2014/04/29 职场文书
优秀会计求职信
2014/07/04 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
公司总经理岗位职责
2015/04/01 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS