對於我這個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() 創建文檔碎片節點
這幾個方法的寫法都是一樣的