<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. ubuntu16.04上安装Jenkins,获取登陆密码

    sudo cat /usr/share/tomcat7/.jenkins/secrets/initialAdminPassword

  2. jQuery.extend()意义及用途

    一.意义 用于将一个或多个对象的内容合并到目标对象 二.用法: $.extend( [deep ], target, object1 [, objectN ] ) 注意: 1. 如果只为$.exten ...

  3. Codeforces 556D - Case of Fugitive

    556D - Case of Fugitive 思路:将桥长度放进二叉搜索树中(multiset),相邻两岛距离按上限排序,然后二分查找桥长度匹配并删除. 代码: #include<bits/s ...

  4. Hibernate实例

    Hibernate实例 一.Hibernate简介 Hibernate是简化项目中连接数据库的一个框架工具 Hibernate是Java领域类技术成熟稳定的ORM框架 * ORM是对象关系映射 * 使 ...

  5. Style样式的四种使用(包括用C#代码动态加载资源文件并设置样式)

    Posted on 2012-03-23 11:21 祥叔 阅读(2886) 评论(6) 编辑 收藏 在Web开发中,我们通过CSS来控制页面元素的样式,一般常用三种方式: 1.       内联样式 ...

  6. English trip V1 - 2.Don't Do That Teacher:Patrick Key: 祈使句(imperatives)

    什么是祈使句?    What's imperatives? 求或者希望别人做什么事或者不做什么事时用的句子:带有命令的语气 In this lesson you will learn how to ...

  7. Rspec: everyday-rspec实操: 第8章DRY. (6个方法,其中3个方法好上手)

    Don't Repeat Yourself. • 把操作步骤提取到辅助模块中;✅ • 通过let复用测试中的实例变量;✅ • 把通用的设置移到共享的情景中;⚠️(不喜欢) • 在RSpec和rspec ...

  8. 2月9日 Time and Date(Ruby基础) \n 2月10日 ,使用Proc,block对象化。

    20.1Time类 ,Data类 Time.now或者Time.new:获取当前时间. 相关Method: year, month, hour, min ,sec, wday: 一周中的第几天,返回整 ...

  9. android--------WebView实现 Html5 视频标签加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  10. CF1082G Petya and Graph

    题意 定义图权 = 图中边权总和 - 图中点权总和(空图的图权=0),求 n 个点 m 条边的无向图最大权子图. 把边看成点,这个点与两个原图中的点连边.直接最小割求最大闭合子图即可.