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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
js DOM模型操作
Dec 28 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
javascript实现智能手环时间显示
Sep 18 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
javascript 特殊字符串
2009/02/25 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
JavaScript函数详解
2014/11/17 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python中requests和https使用简单示例
2018/01/18 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python画折线图的程序
2018/07/26 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python异步存储数据详解
2019/03/19 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
django配置app中的静态文件步骤
2020/03/27 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
小学新学期教师寄语
2014/01/18 职场文书
幼儿园新年寄语
2014/04/03 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
中学清明节活动总结
2014/07/04 职场文书
四风问题查摆材料
2014/08/25 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
个人思想政治总结
2015/03/05 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
TS 类型收窄教程示例详解
2022/09/23 Javascript