当前位置: 代码迷 >> 综合 >> appendChild()
  详细解决方案

appendChild()

热度:86   发布时间:2024-01-18 12:20:59.0
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
  1. >  
  2. <</span>html xmlns="http://www.w3.org/1999/xhtml">  
  3. <</span>head>  
  4. <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <</span>title>appendChild</</span>title>  
  6. <</span>style>   
  7. div{ background:#0000FF;width:100px;height:100px;}    
  8. span{ background:#00FF00;width:100px;height:100px;}    
  9. p{ background:#FF0000;width:100px;height:100px;}    
  10. </</span>style>   
  11. </</span>head>   
  12. <</span>body>   
  13. <</span>div id="a"><</span>span>SPAN</</span>span>DIV</</span>div>   
  14. <</span>span>SPAN</</span>span>  
  15. <</span>p>P</</span>p>   
  16. <</span>button type="button" onclick=cloneX()>创建新节点</</span>button>  
  17. </</span>body>  
  18. </</span>html>  


js

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


FF怎么获得类似IE,outHTML

html

[html]  view plain copy
  1.  >   
  2. <</span>html xmlns="http://www.w3.org/1999/xhtml">   
  3. <</span>head>   
  4. <</span>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <</span>title>获取outerHMTL</</span>title>   
  6. <</span>style>   
  7. div{ background:#0000FF;width:100px;height:100px;}    
  8. span{ background:#00FF00;width:100px;height:100px;}    
  9. p{ background:#FF0000;width:100px;height:100px;}    
  10. </</span>style>   
  11. </</span>head>   
  12. <</span>body>   
  13. <</span>div id="a"><</span>span>SPAN</</span>span>DIV</</span>div>   
  14. <</span>span>SPAN</</span>span>  
  15. <</span>p>P</</span>p>   
  16. </</span>body>  
  17. </</span>html>  


js

[javascript]  view plain copy
  1. function getOuterHTML(id){  
  2.  var el document.getElementByIdx_x(id);  
  3.  var newNode document.createElement_x("div");  
  4.  //document.appendChild(newNode);  
  5.  document.body.appendChild(newNode);  
  6.  var clone el.cloneNode(true);  
  7.  newNode.appendChild(clone);  
  8.  alert(newNode.innerHTML);  
  9.  document.body.removeChild(newNode);  
  10.  
  11. getOuterHTML("a");