现在总结下原生Javascript中节点的操作，框架诚可贵，原生更久远啊。

在Javascript中新增一个dom元素的对象是 document.createElement("type");

创建了一个元素节点以后要把这个节点增加到html的dom中那么就要用到appendChild() 或 insertBefore()方法

下面举个例子

 

 
    
     
         
  1. <script type="text/javascript"> 
    2.  
         
  2.   var oTest = document.getElementById("test"); 
    3.  
         
  3.   var newNode = document.createElement("p"); 
    4.  
         
  4.   newNode.innerHTML = "This is a test"; 
    5.  
         
  5.   //测试从这里开始 
    6.  
         
  6.   //appendChild方法： 
    7.  
         
  7.   oTest.appendChild(newNode); 
    8.  
         
  8.   //insertBefore方法： 
    9.  
         
  9.   oTest.insertBefore(newNode,null); 
    10.  
         
  10. </script> 
    11.  
        
 
    
 
 
    
那么我下面给出一个全面的例子，基本上不用唠叨什么，我们在给指定的位置（id）的节点中增加一个完整的form表单
 
    
 
    
     
         
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5.  
         
  5. <title>Javascript之节点操作</title> 
    6.  
         
  6. <style> 
    7.  
         
  7.     #container {margin-left: auto; margin-right: auto; width:960px;} 
    8.  
         
  8. </style> 
    9.  
         
  9. <script type="text/javascript"> 
    10.  
         
  10. function addNewForm(node_id){ //通过动态新建一个完整的表单来熟悉Javascript的节点操作 
    11.  
         
  11.     e = document.getElementById(node_id); 
    12.  
         
  12.     e_form = document.createElement("form"); 
    13.  
         
  13.     //两种方法对新建的节点的属性进行赋值 如下 两种效果等同 
    14.  
         
  14.     //第一种：e_form.setAttribute("method","post"); 
    15.  
         
  15.     //第二种: e_form.method = "post"; 
    16.  
         
  16.     e_form.method = "post"; 
    17.  
         
  17.     e_form.action = "http://localhost/test/index.php"; 
    18.  
         
  18.     e_form.name = "apply_form"; 
    19.  
         
  19.     e_form.enctype = "multipart/form-data"; 
    20.  
         
  20.     //等等 属性  
    21.  
         
  21.     //建立表单内部的元素节点 
    22.  
         
  22.     e_intput_text = document.createElement("input"); // text 节点 
    23.  
         
  23.     e_intput_text.type = "text"; //<input type="text" name="apply_input_text" value="defalut" /> 
    24.  
         
  24.     e_intput_text.name = "apply_input_text"; 
    25.  
         
  25.     e_intput_text.id = "apply_input_text"; 
    26.  
         
  26.     e_intput_text.value = "dafault"; 
    27.  
         
  27.      
    28.  
         
  28.     e_input_select = document.createElement("select"); //select 元素 
    29.  
         
  29.     e_input_select.options[0] = new Option("OptionOneName", "OptionOneValue"); 
    30.  
         
  30.     e_input_select.options[1] = new Option("OptionTwoName", "OptionTwoValue"); 
    31.  
         
  31.     e_input_select.options[2] = new Option("OptionThreeName", "OptionThreeValue"); 
    32.  
         
  32.     e_input_select.options[3] = new Option("OptionFourName", "OptionFourValue"); 
    33.  
         
  33.      
    34.  
         
  34.     e_intput_password = document.createElement("input"); // password 节点 
    35.  
         
  35.     e_intput_password.type = "password"; //<input type="text" name="apply_input_text" value="defalut" /> 
    36.  
         
  36.     e_intput_password.name = "apply_input_password"; 
    37.  
         
  37.     e_intput_password.id = "apply_input_password"; 
    38.  
         
  38.     e_intput_password.value = "can_you_guess";   
    39.  
         
  39.      
    40.  
         
  40.     e_intput_button = document.createElement("input"); // text 节点 
    41.  
         
  41.     e_intput_button.type = "button"; //<input type="text" name="apply_input_text" value="defalut" /> 
    42.  
         
  42.     e_intput_button.name = "apply_input_button"; 
    43.  
         
  43.     e_intput_button.id = "apply_input_button"; 
    44.  
         
  44.     e_intput_button.value = "按钮"; 
    45.  
         
  45.     e_intput_button.onclick = "javascript:alert('This is a test!');";     //新增一个事件属性 
    46.  
         
  46.      
    47.  
         
  47.     e_intput_submit = document.createElement("input"); // text 节点 
    48.  
         
  48.     e_intput_submit.type = "submit"; //<input type="text" name="apply_input_text" value="defalut" /> 
    49.  
         
  49.     e_intput_submit.name = "apply_input_submit"; 
    50.  
         
  50.     e_intput_submit.value = "提交"; 
    51.  
         
  51.      
    52.  
         
  52.     //把表单内部的元素节点增加到表单节点内部appendChild() 或 insertBefore() 都可以  
    53.  
         
  53.     //区别在于 appendChild 把新加的节点放到节点内部的最后 而 
    54.  
         
  54.     //insertBefore 可以提供参数把节点加入到任意的指定位置 
    55.  
         
  55.      
    56.  
         
  56.     e_form.appendChild(e_intput_text); //文本输入框 
    57.  
         
  57.     e_form.appendChild(e_input_select); //下拉选择框 
    58.  
         
  58.     e_form.appendChild(e_intput_password); // 密码输入框 
    59.  
         
  59.     e_form.appendChild(e_intput_button); //button 按钮 
    60.  
         
  60.     e_form.appendChild(e_intput_submit); //submit 提交按钮 
    61.  
         
  61.      
    62.  
         
  62.     //下面来用示例说明下 insertBefore(newNode,null); 
    63.  
         
  63.     //如果第二个参数为null 那么跟appendChild 的效果是一样的哦 如果想要传入到特定的位置那么需要传入一个节点元素 
    64.  
         
  64.      //这个就不再这里举例了 在文字介绍里面介绍下 
    65.  
         
  65.     e.appendChild(e_form);//把Form 节点加载到页面传入的节点内部 
    66.  
         
  66. } 
    67.  
         
  67. </script> 
    68.  
         
  68. </head> 
    69.  
         
  69. <body> 
    70.  
         
  70. <div id="container"> 
    71.  
         
  71.     <div id="testarea"> 
    72.  
         
  72.         <div id="excutearea"></div> 
    73.  
         
  73.         <div οnclick="addNewForm('addArea')">在指定元素的内部增加一个完整的表单</div> 
    74.  
         
  74.     </div> 
    75.  
         
  75.     <br/> 
    76.  
         
  76.     <div id="addArea"> 
    77.  
         
  77.             <div>指定区域</div> 
    78.  
         
  78.     </div> 
    79.  
         
  79. </div> 
    80.  
         
  80. </body> 
    81.  
         
  81. </html> 
    82.  
        
 
    
 
 
    
基本上的用法在里面都有，下面来从网上摘抄了例子解释下insertBefore()
 
    
 
 
    
 
    
     
         
  1. <script type="text/javascript"> 
    2.  
         
  2.   //效果：这个例子将在x1节点前面插入一个新的节点 
    3.  
         
  3.   var oTest = document.getElementById("test"); 
    4.  
         
  4.   var refChild = document.getElementById("x1"); 
    5.  
         
  5.   var newNode = document.createElement("p"); 
    6.  
         
  6.   newNode.innerHTML = "This is a test"; 
    7.  
         
  7.   oTest.insertBefore(newNode,refChild); 
    8.  
         
  8.    
    9.  
         
  9.   //或者 
    10.  
         
  10.   //效果：这个例子将在x1节点的下一个节点前面插入一个新的节点   
    11.  
         
  11.   var oTest = document.getElementById("test"); 
    12.  
         
  12.   var refChild = document.getElementById("x1"); 
    13.  
         
  13.   var newNode = document.createElement("p"); 
    14.  
         
  14.   newNode.innerHTML = "This is a test"; 
    15.  
         
  15.   oTest.insertBefore(newNode,refChild.nextSibling); 
    16.  
         
  16.   //还可为： 
    17.  
         
  17.   //这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点 
    18.  
         
  18.   var oTest = document.getElementById("test"); 
    19.  
         
  19.   var newNode = document.createElement("p"); 
    20.  
         
  20.   newNode.innerHTML = "This is a test"; 
    21.  
         
  21.   oTest.insertBefore(newNode,oTest.childNodes[0]);  
    22.  
         
  22. </script> 
    23.  
        
 
    
基本上的操作就这些
 
    
参考: