js动态创建及移除div的方法

最新推荐文章于 2021-06-18 17:44:59 发布

weixin_34228662

最新推荐文章于 2021-06-18 17:44:59 发布

阅读量253

点赞数

本文实例讲述了js动态创建及移除div的方法。分享给大家供大家参考。具体实现方法如下：

 
          //创建div  
         
          function 
          createDiv(){  
         
          if 
          (document.getElementByIdx_x( 
          "newD" 
          )!= 
          null 
          )  
         
          document.body.removeChild(document.getElementByIdx_x( 
          "newD" 
          ));  
         
          var 
          Div = document.create_rElement( 
          "div" 
          ); 
          //创建div  
         
          Div.setAttribute( 
          "id" 
          ,  
          "newD" 
          );  
         
          Div.style.position =  
          "absolute" 
          ;  
         
          Div.style.height =  
          "160px" 
          ;  
         
          Div.style.width =  
          "400px" 
          ;  
         
          Div.style.border =  
          "1px solid grey" 
          ;  
         
          Div.style.background =  
          "white" 
          ;  
         
          Div.style.paddingTop =  
          "40px" 
          ;  
         
          Div.style.zIndex =  
          "100" 
          ;  
         
          Div.style.left = 100 + 
          "px" 
          ; 
          //注意Firefox下必须加"px"  
         
          Div.style.top = 100 + 
          "px" 
          ;  
         
          Div.style.textAlign =  
          "center" 
          ;  
         
          Div.style.fontSize =  
          "18px" 
          ;  
         
          var 
          str =  
          "<div id=\"divClose\" onclick=\"removeDiv()\" style=\"width:16px;height:16px;float:right;margin-top:-40px;background:url(images/divClose.gif);\"><\/div>" 
          ;  
         
          Div.innerHTML = str + title;  
         
          document.body.appendChild(newD);  
         
          }  
         
          //移除创建的div  
         
          function 
          removeDiv(){  
         
          document.body.removeChild(document.getElementByIdx_x_x( 
          "newD" 
          ));  
         
          }