对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点

百度了一下动态添加文本节点的方式 是使用document.createNodeChild("要想添加的内容");   这个方法

它的使用方式是：

          var correct = document.createTextNode("输入正确");

          var error = document.createTextNode("输入错误");

首先用一个变量储存一个文本节点的内容

然后

result1.appendChild(correct);

result1.appendChild(error);

然后在某个元素节点上调用appendChild() 这个方法 把上面的文本节点变量添加进去

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js 正则表达式练习</title>

    <script type="text/javascript">

      window.onload = function(){

          var maillimit = /^(\w-*\.*)+@(\w+-*)+(\.+\w{2,})+$/;

          var phonelimit = /^1\d{10}$/;

          var mailNum,phoneNum;

          var mail = document.getElementById('mail');

          var phone = document.getElementById('phone');

          var result1 = document.getElementById("result1");

          var result2 = document.getElementById("result2");

          var correct = document.createTextNode("输入正确");

          var error = document.createTextNode("输入错误");

          mail.onblur = function(){

              mailNum = this.value;

              if (maillimit.test(mailNum)) {

                result1.appendChild(correct);

              } else {

                  result1.appendChild(error);

              }

          }

          phone.onblur = function(){

              phoneNum = this.value;

              if (phonelimit.test(phoneNum)) {

                  result2.appendChild(correct);

              } else {

                  result2.appendChild(error);

              }

          }

   }       

    </script>

</head>

<body>

    <form id="client" action=" ">

       邮箱:<input type="text" name="mail" id="mail"><span id="result1"></span><br>

       电话号码：<input type="input" name="phone" id="phone"><span id="result2"></span>

    </form>

</body>

</html>

科普另外的添加节点方法

createElement() 创建一个元素节点

createTextNode() 创建一个文本节点

createDocumentFragment() 创建文档碎片节点

这几个方法的写法都是一样的

【实践】js 如何实现动态添加文本节点的更多相关文章

  1. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  2. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  3. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  4. 使用js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  5. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  6. 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS对select动态添加options操作（主流浏览器兼容）

    之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...

  8. js向标签中添加文本或其他的简例

    1.如何用js 在div内插入内容? 不是改变内容,而是插入,就是在保留原内容的基础上,在尾部添加.举个例子. 元内容<div>你好</div> 插入后<div>你 ...

  9. MySQL Group Replication 动态添加成员节点

    前提: MySQL GR 3节点(node1.node2.node3)部署成功,模式定为多主模式,单主模式也是一样的处理. 在线修改已有GR节点配置 分别登陆node1.node2.node3,执行以 ...

随机推荐

  1. Python之路第一课Day3--随堂笔记（文件操作）

    一.集合的介绍 1.集合操作 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 常用操作 s = se ...

  2. Daily Scrum02 12.07

    最近大家都在赶编译的大作业,没日没夜的码代码,调试,大家都很辛苦,但是,我们团队的工作,大家也不能懈怠啊! 大家要顶住压力,加油努力啊! Member 任务进度 下一步工作 吴文会 就总结点进行汇报 ...

  3. phpcms开发过程中遇到的问题总结

    1.Q:phpcms后台页面使用ajax会进不了控制器方法中 A:因为后台安全性比较高,需要进行hash验证,直接在浏览器输入ajax要访问的路径就会出现如下图的报错.所以后台页面尽可能用其他方法   ...

  4. Linux下解压命令大全 解压缩 tar bz2 zip tar.gz gz

    .tar解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)---------------.gz解压1:gunz ...

  5. 通过版本号实现乐观锁(MVCC)

    乐观锁大多是基于数据版本记录的机制实现 , 如 , 为每一行数据增加一个整型版本标识(version) , 每次数据更新都把版本号+1 工作原理:读取出数据时,将此版本号一同读出,之后更新时,对此版本 ...

  6. 关于smarty的一些个人笔记

    注释为{注释} 注意下面代码中<%extends file="路径"%>和<%widget name="路径"%>这两个路径中的区别 c ...

  7. 轻量级ORM-Fluentdata入门

    Fluent Data 入门 由 Primates 根据互联网资源整理FluentData 是微型 ORM(micro-ORM)家族的一名新成员,旨在比大型 ORM(full ORM)更加易用.Flu ...

  8. 指定的架构无效。错误: CLR 类型到 EDM 类型的映射不明确

    在使用WebService开发时,同时使用了EF和linq,查询数据时,使用linq(查询订单)可以正常拉出数据, 但是使用EF(查询用户)却会报以下错误: {"指定的架构无效.错误: \r ...

  9. scanf、printf、gets、puts的应用及区别

    1.scanf()函数 函数scanf()按指定的格式从键盘读取数据,并将其赋给一个或多个变量.例如: scanf(“%d %f”, &x,&rate);  输入多个变量时,scanf ...

  10. mui框架使用的过程中遇到的几个问题

    1.zepto.js和mui一起使用的时候,tap事件会发生两次,这时只要不引用zepto.js的touch.js就可以了,只用mui的tap事件,如: mui(".infor_header ...