<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. Linux环境下的定时任务(转载)

    今天做了个数据库的备份脚本,顺便系统得学习一下Linux下定时执行脚本的设置.Linux下的定时执行主要是使用crontab文件中加入定制计划来执行,设置比Windows稍微复杂一些(因为没有图形界面 ...

  2. English trip -- VC(情景课)9 A Get ready

    She is doing homwork He is doing laundry He is drying the dishes She is making lunch She is making t ...

  3. LeetCode--112--路径总和

    问题描述: 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例:  给定如下二叉树,以及目标和 s ...

  4. codeforces 521a//DNA Alignment// Codeforces Round #295(Div. 1)

    题意:如题定义的函数,取最大值的数量有多少? 结论只猜对了一半. 首先,如果只有一个元素结果肯定是1.否则.s串中元素数量分别记为a,t,c,g.设另一个串t中数量为a',t',c',g'.那么,固定 ...

  5. 1 python基础知识

    一.python简介 编译型:将所有的源码先编译成机器型语言,并保存为二进制文件,然后一次性执行c c++ go swift 解释型:将代码一行一行边编译边解释python javascript ph ...

  6. nothing added to commit but untracked files present.

    当我们使用git的时候 如果我们在工作区修改了某些文件而没有新增文件,可以直接用: $ git commit --all -m "备注信息"                  -- ...

  7. C++中的初始化参数列表

    c++中以下几种情况的变量的初始化不可以写在构造函数里,而是要写在初始化参数列表中 1.const常量 class AA { public : const int num; public : AA() ...

  8. 字符串 dfs

    1222: FJ的字符串 [水题] 时间限制: 1 Sec 内存限制: 128 MB 提交: 52 解决: 9 状态 题目描述 FJ在沙盘上写了这样一些字符串: A1  =  “A” A2  =  “ ...

  9. Oracle 使用GSON库解析复杂json串

    在前文中讲到了如何使用JSON标准库解析json串,参考: Oracle解析复杂json的方法(转) 现补充一篇使用GSON库在Oracle中解析复杂json的方法. GSON串的使用教程参考官方文档 ...

  10. (转)使用UTL_SMTP包发送邮件

    使用UTL_SMTP包发送邮件 参考文档 Email From Oracle PL/SQL (UTL_SMTP) UTL_SMTP Oracle 存储过程中发送邮件,并支持用户验证.中文标题和内容