js自动校验之动态生成错误提示信息节点（复习下如何操作dom节点）

我的目的是提交表单，js校验时，在输入框后面提示错误信息
如下，红色字体节点为js动态创建的
<p>
<input id="name" name="name" /><font class="red">error_msg</font>
<p>

function showErrmsg(msg,id){
  var lo=document.getElementById(id);
  var p=lo.parentNode;
    if(p.lastChild!=lo){
     p.removeChild(p.lastChild);
     }
  if(msg!=""){
    if(p.lastChild==lo){
     var font=document.createElement("span"); 
      font.className="red";
      font.innerHTML=msg;
      p.appendChild(font); 
     return false;   
    }
   }else{
    return true;
   }
}

 

 

 

有错误信息时，自动创建节点。没有则删除之前自动创建的节点。

 

这里把输入框父类节点的最后一个当作是错误提示信息节点。当然也可以有其他的选择，如把错误信息节点的ID统一下。

 

参考文章

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/

 

nodeName 报告节点的名称（详见下述）。 nodeValue 提供节点的 “值”（详见后述）。

• parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
• childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
• firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。
• lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。
• previousSibling 返回当前节点之前 的节点。换句话说，它返回当前节点的父节点的 childNodes 列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
• nextSibling 类似于 previousSibling 属性，返回父节点的 childNodes 列表中的下一个节点。
• attributes 仅用于元素节点，返回元素的属性列表。

• insertBefore(newChild, referenceNode) 将 newChild 节点插入到 referenceNode 之前。记住，应该对 newChild 的目标父节点调用该方法。
• replaceChild(newChild, oldChild) 用 newChild 节点替换 oldChild 节点。
• removeChild(oldChild) 从运行该方法的节点中删除 oldChild 节点。
• appendChild(newChild) 将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。
• hasChildNodes() 在调用该方法的节点有孩子时则返回 true，否则返回 false。
• hasAttributes() 在调用该方法的节点有属性时则返回 true，否则返回 false。