js动态创建html

<html>


    <head>

         <title>js动态创建html元素</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

         <script type="text/javascript">
             /*
               lastChild属性
               firstChild属性
               nextSibling属性
               parentNode 属性

               appendChild() 方法
               insertBefore() 方法

               createElement()
               createTextNode()
             */
              function gen(){

                   var a = document.getElementById("a");

                   var p = document.createElement("p");
                   p.innerHTML="js动态创建html元素";
                 //追加到div作为最后一级节点
                   a.appendChild(p);

                   var m = document.getElementById("m");
                   var ip = document.createElement("input");
            
               //插入到指定节点的前面
                  m.insertBefore(ip,null);

                  //获取其父节点
                  var parent = m.parentNode;
                  parent.insertBefore(ip,parent.nextSibling);
                 
                 //创建文本内容的节点
                   var t = document.createTextNode("Hello Javascript");

                   a.appendChild(t);
 


              }

         </script>


    </head>


    <body onload="gen();">


          <div id="a">
              
                <span id="m">javascript</span>

                <span id="n">html</span>

          </div>


    </body>


</html>