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方法添加回调函数一款插件的应用
Jan 21 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php四种基础算法代码实例
2013/10/29 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
图片自动更新(说明)
2006/10/02 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Angular实现的进度条功能示例
2018/02/18 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
对numpy中shape的深入理解
2018/06/15 Python
Flask-Mail用法实例分析
2018/07/21 Python
python实现随机梯度下降法
2020/03/24 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
几个SQL的面试题
2014/03/08 面试题
自荐书封面下载
2013/11/29 职场文书
药剂专业求职信
2014/06/20 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
上课说话检讨书
2015/01/27 职场文书
2015年社区工作总结
2015/04/08 职场文书
二年级数学教学反思
2016/02/16 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
python实现自动化群控的步骤
2021/04/11 Python
python随机打印成绩排名表
2021/06/23 Python