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

前端APP 投稿 9800 0 评论

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

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

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

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


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

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

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


<script type="text/javascript">
function add({
	var input=document.createElement("<input size=30 type=\"text\" name=\"extrachildren[]\">"
	var br=document.createElement("<br>";
	var br2=document.createElement("<br>";
	document.getElementById("children".insertBefore(br;
	document.getElementById("children".insertBefore(br2;
	document.getElementById("children".insertBefore(input;
</script>

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


<script type="text/javascript">
function add({
    var input=document.createElement('input';
    input.setAttribute('size','30';
    input.setAttribute('type','text';
    input.setAttribute('name','extrachildren[]';
    var parent=document.getElementById('children';
    parent.insertBefore(document.createElement('br',null;
    parent.insertBefore(document.createElement('br',null;
    parent.insertBefore(input,null;
}
</script>

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

document.createElement("<input type=text>"
document.createElement("<input>"
document.createElement("input"

而Firefox只支持一种方式:

document.createElement("input";
document.setAttribute(name,value;

编程笔记 » js插入元素到body元素最前面的办法

赞同 (49) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽