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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
webpack搭建vue 项目的步骤
Dec 27 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php中大括号作用介绍
2012/03/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
常见python正则用法的简单实例
2016/06/21 Python
python实现微信远程控制电脑
2018/02/22 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Django组件content-type使用方法详解
2019/07/19 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
室内设计专业自荐信
2014/05/31 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
小学音乐课教学反思
2016/02/18 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
深入浅析Django MTV模式
2021/09/04 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js