【实践】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,执行以 ...
随机推荐
- Flume_初识
企业架构 数据源 webserver RDBMS 数据的采集 shell.flume.sqoop job 监控和调度 hue.oozie 数据清洗及分析 mapreduce.hive 数据保存 sqo ...
- Javascript初学篇章_1（概念/数据类型）
Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...
- springmvc+spring+hibernate
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...
- JavaScript如何使用this
学习this的使用必须牢记以下两点 1.this是一个只能在函数内部使用的关键字 2.this指向调用函数的那个对象 下面我们来具体讨论一下this的具体使用方法 第一种:通过函数调用的方式----- ...
- 20145205 实验一 Java开发环境的熟悉
实验内容 命令行下Java程序开发 IDEA下Java程序开发.调试 练习(通过命令行和Eclipse两种方式实现,在Eclipse下练习调试程序) 实现凯撒密码,并进行测试 实验要求 使用JDK编译 ...
- jquery 时间戳与日期转换
(function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: functio ...
- ubuntu 上安装字体
http://www.360doc.com/content/11/0901/23/4171006_145128703.shtml http://www.linuxidc.com/Linux/2008- ...
- AppScan漏洞“已解密的登陆请求”修复解决方案
最近在修复系统漏洞时,使用新版AppScan扫描IIS站点(WebForm)出现一个严重漏洞“已解密的登陆请求”. 扫描工具修复的建议为在登陆界面不使用含“password”类型的控件或加密录入参数. ...
- [CC]获取ScalarField的值
//根据字段滤波void MainWindow::doActionFilterByValue() ReferenceCloud* ManualSegmentationTools::segment(Ge ...