<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 元组转字符串

    tup = ('e', 'x', 'e', 'r', 'c', 'i', 's', 'e', 's') str = ''.join(tup) print(str)

  2. sudo: /etc/sudoers is world writable sudo: no valid sudoers sources found, q...

    今天操作/etc/sudoers 文件,因为该文件只读,所以sudo chmod 777 /etc/sudoers ,结果可以修改这个文件了,但是导致所有用户的sudo都不能用了 是因为在Linux中 ...

  3. Python day15装饰器基本理论,以及结合全局变量模拟session

    装饰器(decorator):为其他函数添加附加功能 原则:1.不修改被修饰函数源代码 2.不修改被修饰函数的调用方式 装饰器=高阶函数+函数嵌套+闭包 import time def timmer( ...

  4. vs2010_相关目录

    1. C:\Program Files\Microsoft SDKs\Windows\v7.0A 2.创建了 C:\Program Files\Microsoft Visual Studio 9.0 ...

  5. [ios]NSThread传值 NSValue传值

    NSThread:http://www.cocoachina.com/bbs/read.php?tid=51873 NSValue:http://blog.sina.com.cn/s/blog_bf9 ...

  6. openstack 问题一览(持续总结中)

    ★名词 Qemu:它也是一种虚拟化技术,主要提供对IO,网络等外设的虚拟化管理.结合KVM(对CPU和内存管理),提供较为完整的虚拟化管理功能. Libvirt:提供了针对各种虚拟机技术的接口,来管理 ...

  7. 2018年全国多校算法寒假训练营练习比赛(第一场)C 六子冲

    https://www.nowcoder.com/acm/contest/67/C 思路: 模拟. 代码: #include<bits/stdc++.h> using namespace ...

  8. Codeforces 847H - Load Testing

    847H - Load Testing 思路:dp. 代码: #include<bits/stdc++.h> using namespace std; #define ll long lo ...

  9. Python requests快速上手

    Python requests快速上手 这里参考官方文档,在ide中写了一遍,加深一下印象,定义的函数只是为了方便区分不同的请求方式 #-*-coding:utf-8-*- # Time:2017/1 ...

  10. PHP消息队列之Beanstalk

    Beanstalk,一个高性能.轻量级的分布式内存队列