js 元素创建操作

<!DOCTYPE html>
<html>
   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <style>
       </style>
       <script>
           window.onload = function(){
               var oText = document.getElementById('text1');
               var oBtn = document.getElementById('btn');
               var oUl = document.getElementById('ul1');
               oBtn.onclick = function(){
                   var oLi = document.createElement('li');
                   oLi.innerHTML = oText.value;
                   var oA = document.createElement('a');
                   oA.innerHTML = '删除';
                   oA.href='javascript:;';
                   oA.onclick = function(){
                       //父级.removeChild(要删除的元素);删除元素
                       oUl.removeChild(this.parentNode);
                   }
                   oLi.appendChild(oA);

                   if(oUl.children[0]){
                       oUl.insertBefore(oLi,oUl.children[0]);
                   }else{
                       oUl.appendChild(oLi);
                   }
               }
           }
       </script>
   </head>
   <body>
       <input type="text" id="text1" />
       <input type="button" value="留言" id="btn" />
       <ul id="ul1"></ul>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <style>
       </style>
       <script>
           window.onload = function(){
               var oDiv = document.getElementById('div1');
               var oBtn = document.getElementById('btn');
               var oP = document.getElementById('p1');

               oBtn.onclick = function(){
                   //父级.replaceChild(新节点，被替换节点)替换子节点
                   document.body.replaceChild(oDiv,oP);
               }
           }
       </script>
   </head>
   <body>
       <div id="div1">div1</div>
       <input type="button" value="按钮" id="btn" />
       <hr />
       <p id="p1">pppppp</p>
   </body>
</html>

appendChild,insertBefore,replaceChild都可操作动态创建出来的节点，也可以操作已有节点。

猜你喜欢