【实践】js 如何实现动态添加文本节点
对于我这个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 如何实现动态添加文本节点的更多相关文章
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS对select动态添加options操作（主流浏览器兼容）
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
- js向标签中添加文本或其他的简例
1.如何用js 在div内插入内容? 不是改变内容,而是插入,就是在保留原内容的基础上,在尾部添加.举个例子. 元内容<div>你好</div> 插入后<div>你 ...
- MySQL Group Replication 动态添加成员节点
前提: MySQL GR 3节点(node1.node2.node3)部署成功,模式定为多主模式,单主模式也是一样的处理. 在线修改已有GR节点配置 分别登陆node1.node2.node3,执行以 ...
随机推荐
- java接口的嵌套
java接口 1.接口中定义的变量默认是public static final 型,且必须给其初值,所以实现类中不能重新定义,也不能改变其值 2.接口中的方法默认都是 public abstract ...
- css 注意点
HTML css 一.整体布局 1.创建一个html标签 2.创建三个div标签(分别是网页的头部,中间,和底部三部分) 3.一般都用class选择器 4.用css给body标签加个 margin:0 ...
- 02.JavaScript基础上
JavaScript组成 ECMAScript:解释器.翻译 .平时我们写的代码都是用英文数字之类,而计算机只能读懂0和1,ECMAScript可以把我们写的翻译给计算机,把计算机写的传达给我们DOM ...
- android中的回调简单认识
首先说一下最抽象的形式--2个类,A类和B类.A类含有1个接口.1个接口变量.(可能含有)1个为接口变量赋值的方法以及1个会使用接口变量的"地方";B类实现A中的接口,(可能)含有 ...
- 完全卸载MySQL重新安装MySQL
在"运行(win+R)"里键入regedit进入注册表, 输入之后回车(Enter)确认. 确认之后进去注册表界面 1.HEKY_LOCAL_MACHINE\SOFTWARE\MY ...
- javaScript代码执行顺序
javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...
- vm安装centos 老是出现 grub.conf 配置问题
vm 环境 11 centos 6.5 最开始用的是vm12 发现安装软件一会就出现 客户机操作系统已禁用 cpu.请关闭或重置虚拟机 以为是新机器的cpu或者主板有问题,换vm,换系统依然会出现这 ...
- java基础总结——概述
一.java语言概述 来自维基百科 https://zh.wikipedia.org/wiki/Java Java是一种计算机编程语言,拥有跨平台.面向对象.泛型编程的特性,广泛应用于企业级Web ...
- php 获取数组第一个元素 以及最后一个元素 && 最后一个元素的键名
1. current() 函数返回数组中的当前元素的值. 每个数组中都有一个内部的指针指向它的"当前"元素,初始指向插入到数组中的第一个元素. end() - 将内部指针指向数组中 ...
- TCP协议学习笔记（一）首部以及TCP的三次握手连接四次挥手断开
TCP协议是一种面向连接的.可靠的流协议. 流即不间断的数据结构.这样能够保证接收到数据顺序与发送相同.但是犹如数据间没有间隔,因此在TCP通信中,发送端应用可以在自己所要发送的消息中设置一个标示长度 ...