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

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.     b = 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");