实践js 如何实现动态添加文本节点

Posted Stitch晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实践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-*\.*)[email protected](\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 如何实现动态添加文本节点的主要内容，如果未能解决你的问题，请参考以下文章

在片段中动态添加文本视图

《Ext JS权威指南》节选：树的动态加载及节点维护

js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格

JavaScript如何在div中动态生成<p>

js如何为动态添加进来的a超级链接元素添加click事件函数

js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格