appendChild()_综合

    div xhtml html ie input button 
  

appendChild() 方法在指定元素节点的最后一个子节点之后添加节点。

该方法返回新的子节点。

注意:

appendChild()方法通常与document.createElement_x("div")或document.getElementByIdx_x("id")函数同用，表示先创建然后再添加。

appendChild()的参数不是字符串而是一个对象。

如 nDiv = document.createElement_x("div");document.body.appendChild(nDiv);这个nDiv是没有引号的，是个div对象。

html

[html] view plain copy 
       
      
   >  
   <</span>html xmlns="http://www.w3.org/1999/xhtml">  
   <</span>head>  
   <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   <</span>title>appendChild</</span>title>  
   <</span>style>   
  div{ background:#0000FF;width:100px;height:100px;}    
  span{ background:#00FF00;width:100px;height:100px;}    
  p{ background:#FF0000;width:100px;height:100px;}    
   </</span>style>   
   </</span>head>   
   <</span>body>   
   <</span>div id="a"><</span>span>SPAN</</span>span>DIV</</span>div>   
   <</span>span>SPAN</</span>span>  
   <</span>p>P</</span>p>   
   <</span>button type="button" onclick=cloneX()>创建新节点</</span>button>  
   </</span>body>  
   </</span>html>  

[javascript] view plain copy 
       
      
   function cloneX(){  
      var nDiv = document.createElement_x("div");  //创建之后必须通过appendChild()之类的函数才能在页面上显示  
      document.body.appendChild(nDiv); //不能用document.appendChild,必须用document.body.appendChild();  
      //var txt = document.createElement_x("input");  
      try{  
          var txt = document.createElement_x("")   
          //只有IE可以看到,FF会进行catch(e).这种写法对IE和FF的差别属性很有用，如现在这个name属性，如果用下面FF这种写法，IE不认，所以IE要用上面的写法，其他通用属性可以用下面的写法。  
      }  
      catch(e){  
          var txt = document.createElement_x("input") //FF通过这种方式做到与IE一样，IE也可以直接用这种方式。  
          txt.name = 'bobo';  
      }  
      txt.style.margin = 10+'px';  
      txt.value = "bobowa";  
      nDiv.appendChild(txt);  
      b = document.getElementsByName("bobo")[0];  
      alert(b.value)  
  }  

FF怎么获得类似IE,outHTML

html

[html] view plain copy 
       
      
    >   
   <</span>html xmlns="http://www.w3.org/1999/xhtml">   
   <</span>head>   
   <</span>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
   <</span>title>获取outerHMTL</</span>title>   
   <</span>style>   
  div{ background:#0000FF;width:100px;height:100px;}    
  span{ background:#00FF00;width:100px;height:100px;}    
  p{ background:#FF0000;width:100px;height:100px;}    
   </</span>style>   
   </</span>head>   
   <</span>body>   
   <</span>div id="a"><</span>span>SPAN</</span>span>DIV</</span>div>   
   <</span>span>SPAN</</span>span>  
   <</span>p>P</</span>p>   
   </</span>body>  
   </</span>html>  

[javascript] view plain copy 
       
      
   function getOuterHTML(id){  
   var el = document.getElementByIdx_x(id);  
   var newNode = document.createElement_x("div");  
   //document.appendChild(newNode);  
   document.body.appendChild(newNode);  
   var clone = el.cloneNode(true);  
   newNode.appendChild(clone);  
   alert(newNode.innerHTML);  
   document.body.removeChild(newNode);  
  }  
  getOuterHTML("a");  