DOM创建节点和添加属性

这里是页面的实例：

  <form>
  <input type="button" value="ADD" οnclick="demo()"/>
  </form>
  <nav id="nav">  
     <ul id="soul">
     <li><a href="#">first</a></li>
     <li><a href="#">second</a></li>
     <li><a href="#">third</a></li>
     </ul>
  </nav>

 

通过文本对象模型的操作进行添加导航，或者其他操作，javascript文件下

   function demo () {
   var firstParent=document.createElement("li");//创建一个元素节点
   var parent=document.getElementById("soul");
   var newNode=document.createElement("a");
   var newText=document.createTextNode("next");//创建一个文本节点
   newNode.appendChild(newText);//添加最后一个子节点
   var Url=firstParent.appendChild(newNode);
   var newAchor=parent.appendChild(firstParent);
   var changeAchor=Url.setAttribute("href","#");//添加属性和value
   }

这里注意appendChild（）函数是在子节点的最后添加一个节点。