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巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
vue.js学习之递归组件
Dec 13 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
Vue动态实现评分效果
May 24 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
vue实现抖音时间转盘
Sep 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php的dl函数用法实例
2014/11/06 PHP
ThinkPHP控制器详解
2015/07/27 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python实现调度算法代码详解
2017/12/01 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
详解Python 函数参数的拆解
2020/09/02 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
普通PHP程序员笔试题
2016/01/01 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
护士辞职信模板
2014/01/20 职场文书
写给老师的表扬信
2014/01/21 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
抽奖活动主持词
2014/03/31 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
海洋天堂观后感
2015/06/05 职场文书
学校运动会通讯稿
2015/07/18 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
mybatis 获取更新记录的id
2022/05/20 Java/Android