<div id="menu">
    <h1>我的导航条</h1>          
    <ul id="nav">
       <li><a href="#">HOME</a></li>
       <li><a href="#">(X)Html / Css</a></li>
       <li><a href="#">Ajax / RIA</a></li>
       <li><a href="#">GoF</a></li>
       <li><a href="#">JavaScript</a></li>
       <li><a href="#">JavaWeb</a></li>
       <li><a href="#">jQuery</a></li>
       <li><a href="#">MooTools</a></li>
       <li><a href="#">Python</a></li>
       <li><a href="#">Resources</a></li>
    </ul>
</div>

<script type="text/javascript">
window.onload=function(){
  /*为一个元素添加子元素*/
  var nav=document.getElementById("nav");
  //创建一个li新元素
  var newChild=document.createElement('li');
  //创建一个a 新元素
  var newLink=document.createElement('a')
  //创建一个 Text 节点
  var newText=document.createTextNode('My Wiki');
  //把Text添加到a元素节点中
  newLink.appendChild(newText);
  //给a元素节点设置属性href和内容
  newLink.setAttribute('href',"#");
  //把a元素节点添加到新的li元素节点中
  newChild.appendChild(newLink);
  //把新的li元素节点添加到 ul 元素节点里
  nav.appendChild(newChild);
 
  /*<li>从原始位置上被移除，成为ul的最后一个子节点。它的a 元素节点和文本节点HODE也被移了过来*/
  nav_list=nav.getElementsByTagName("li");//返回相同的一组元素
  nav.appendChild(nav_list[0]);
 
 
}
</script>

<script type="text/javascript">
function create( elem ) {
    return document.createElementNS ?
        document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :
        document.createElement( elem );
}
 
</script>

<script type="text/javascript">
window.onload=function(){
  var nav=document.getElementById("nav");
  nav_list=nav.getElementsByTagName("li");//返回相同的一组元素
  //第一个节点
  var x=nav_list[0];
  //最后一个节点
  var y=nav_list[nav_list.length-1]
  //在x元素对象之前插入y元素对象
  nav.insertBefore(y,x);
  //在x元素对象之前插入新生产的newChild元素对象
  nav.insertBefore(newChild,x);//newChild元素对象的创建请参考上面的代码
}
</script>

<script type="text/javascript">
window.onload=function(){
  var nav=document.getElementById("nav");
  nav_list=nav.getElementsByTagName("li");//返回相同的一组元素
  //第一个节点对象
  var x=nav_list[0];
  //x节点对象被newChild新节点对象替换了
  nav.replaceChild(newChild,x);
}
</script>

<script type="text/javascript">
window.onload=function(){
  var nav=document.getElementById("nav");
  nav_list=nav.getElementsByTagName("li");//返回相同的一组元素
  //最后一个节点
  var y=nav_list[nav_list.length-1]
  //移除最后面的一个节点
  nav.removeChild(y);
}
</script>

<script type="text/javascript">
 while (x.childNodes[0]){
 	x.removeChild(x.childNodes[0]);
 }
 
 /*
 //我们可以使用firstChild来代替childNodes[0]
  while (x.firstChild){
 	x.removeChild(x.firstChild);
 }
 * /
</script>

<script type="text/javascript">
x.innerHTML='';
</script>

<script type="text/javascript">
//insertBefore()的代替方法
function before( parent, before, elem ) {
    // Check to see if no parent node was provided
	//检查parent是否传入
    if ( elem == null ) {
        elem = before;
        before = parent;
        parent  = before.parentNode;
    }
 
    // Get the new array of elements
	//获取元素的新数组
    var elems = checkElem( elem );
 
    // Move through the array backwards,
    // because we’re prepending elements
	//向后遍历数组
	//因为我们向前插入元素
    for ( var i = elems.length - 1; i >= 0; i-- ) {
        parent.insertBefore( elems[i], before );
    }
}
</script>

<script type="text/javascript">
//appendChild()的代替方法
function append( parent, elem ) {
    // Get the array of elements
	//获取元素数组
    var elems = checkElem( elem );
 
    // Append them all to the element
	//把它们所有都追加到元素中
    for ( var i = 0; i <= elems.length; i++ ) {
        parent.appendChild( elems[i] );
    }
}
</script>

<script type="text/javascript">
function checkElem( elem ) {
    // If only a string was provided, convert it into a Text Node
	//如果只提供字符串，那就把它转换为文本节点
    return elem && elem.constructor == String ?
	  document.createTextNode( elem ) : elem;
}
</script>

<script type="text/javascript">
function empty( elem ) { 
 while (elem.firstChild){
 	 remove(elem.firstChild);
 }
 /*
 //我们可以使用firstChild来代替childNodes[0]
 while (elem.childNodes[0])
 	remove(elem.childNodes[0]);
 * /
}
 
function remove( elem ) {
    if ( elem ) elem.parentNode.removeChild( elem );
}
</script>