<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>";    
</script>

通过JS动态创建和删除HTML元素的更多相关文章

  1. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. js动态创建和删除option

    1.动态创建select function createSelect(){           var mySelect = document.createElement("select&q ...

  3. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  4. 通过js动态创建button

    通过js动态创建button 一.实例描述 通过JS的DOM对象,实现元素的动态创建. 二.效果 三.代码 <!DOCTYPE html> <html lang="zh-c ...

  5. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  6. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  7. 用JS动态创建登录表单,报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  8. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  9. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

随机推荐

  1. python 可视化时间转时间元组(自定义)

    >>> print(time.strptime('2018-9-30 11:32:23', '%Y-%m-%d %H:%M:%S')) time.struct_time(tm_yea ...

  2. 原始的生成对抗网络GAN

    论文地址:https://arxiv.org/pdf/1406.2661.pdf 1.简介: GAN的两个模型 判别模型:就是图中右半部分的网络,直观来看就是一个简单的神经网络结构,输入就是一副图像, ...

  3. Codeforces 909C - Python Indentation

    909C - Python Indentation 思路:dp. http://www.cnblogs.com/Leohh/p/8135525.html 可以参考一下这个博客,我的dp是反过来的,这样 ...

  4. windows7 asp.net发布IIS 拒绝访问 解决方法

    在windows7中打开DNN网站有以下问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP ...

  5. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  6. [Android教程] Cordova开发App入门(二)使用热更新插件

    前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...

  7. 常用HTTP contentType与后端处理方式

    常用HTTP contentType与后端处理方式 1.Content-Type:application/x-www-form-urlencoded; charset=UTF-8 前端export.j ...

  8. C#窗体控件简介ListBox(需整理)

    ListBox 控件 ListBox 控件又称列表框,它显示一个项目列表供用户选择.在列表框中,用户 一次可以选择一项,也可以选择多项. 1.常用属性: (1) Items属性: 用于存放列表框中的列 ...

  9. Eclipse Indigo 3.7.0 安装GIT插件

    Eclipse上安装GIT插件EGit 首先打开Eclipse,然后点击Help>Install New Software>Add. Name:EGit Location: http:// ...

  10. synchronized锁普通方法和锁静态方法

    1.对象锁钥匙只能有一把才能互斥,才能保证共享变量的唯一性 2.在静态方法上的锁,和 实例方法上的锁,默认不是同样的,如果同步需要制定两把锁一样. 3.关于同一个类的方法上的锁,来自于调用该方法的对象 ...