广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    js插入元素到body元素最前面的办法

    2018-04-05 08:31:53 次阅读 稿源:互联网
    零七广告

    今天需要做个首页打开后,在头部出现一个展开动画的效果。本来是很容易的,加上那个展开代码就OK了。可是发现原来的程序的头部文件包括body部分都放在了head.html里,然后包含进来了。这样必须要在head.html里放入一个用于展开的div,可是这样一来,所有的页面均有了展开效果,可是我只需要在首页有这样的效果。    解决办法有两个:

    1.将头部那个div的display设为none,然后调用js将其设为block。

    2.通过js动态创建一个div并且将这div放在最前面。这就得多加几句话了,如下:

    1. <script language="javascript" type="text/javascript"> 
    2. var divObj=document.createElement("div");  
    3. divObj.innerHTML="hi,欢迎访问 www.phpernote.com php 程序员教程网!"
    4. var first=document.body.firstChild; //得到第一个元素 
    5. document.body.insertBefore(divObj,first); //在第原来的第一个元素之前插入 
    6. </script> 

    下面分享一下如何在FireFox中动态创建html元素(利用createElement)

    我们先来看看如下代码(这段代码是有问题的):

    1. <script type="text/javascript"> 
    2. function add(){ 
    3.     var input=document.createElement("<input size=30 type=/"text/" name=/"extrachildren[]/">") 
    4.     var br=document.createElement("<br>"); 
    5.     var br2=document.createElement("<br>"); 
    6.     document.getElementById("children").insertBefore(br); 
    7.     document.getElementById("children").insertBefore(br2); 
    8.     document.getElementById("children").insertBefore(input); 
    9. </script> 

    上面代码在IE中是可行的,但在FireFox中是不工作的。要想在FireFox中起作用必须换成如下代码:

    1. <script type="text/javascript"> 
    2. function add(){ 
    3.     var input=document.createElement('input'); 
    4.     input.setAttribute('size','30'); 
    5.     input.setAttribute('type','text'); 
    6.     input.setAttribute('name','extrachildren[]'); 
    7.     var parent=document.getElementById('children'); 
    8.     parent.insertBefore(document.createElement('br'),null); 
    9.     parent.insertBefore(document.createElement('br'),null); 
    10.     parent.insertBefore(input,null); 
    11. </script> 

    IE有3种方式都可以创建一个元素:

    1. document.createElement("<input type=text>"
    2. document.createElement("<input>"
    3. document.createElement("input"

    而Firefox只支持一种方式:

    1. document.createElement("input"); 
    2. document.setAttribute(name,value); 

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告