本文目录一览:
网页的动态JS在哪找?
可以在开发者工具当中找。
打开开发者工具,然后选择网络(network),在下面的列表就可以看到动态加载的js文件了。如果文件比较多,可以选js进行筛选。
如果不是js文件,是在页面当中的js,可以在开发者工具的元素(elements)面板里面找到文档当中的js。
通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签:
1.创建某个标签:如下在body中创建一个div的事例;
script
function
fun(){
var
frameDiv
=
document.createElement("div");//创建一个标签
var
bodyFa
=
document.getElementById("bodyid");//通过id号获取frameDiv
的父类(也就是上一级的节点)
bodyFa
.appendChild(frameDiv);//把创建的节点frameDiv
添加到父类body
中;
}
script
body
id="bodyid"
!--在此添加div标签--
/body
2.添加属性:给创建的标签添加相应的属性:
frameDiv
.setAttribute("id",
"divid");//给创建的div设置id值;
frameDiv
.className="divclass";
//给创建的div设置class;
//给某个标签添加显示的值;
var
h
=
document.createElement("h1");
h.innerHTML
=
data[i].name;
var
p
=
document.createElement("p");
p.innerHTML
=
"要显示的值";
3.创建的标签添加事件:
a.不带参数:
frameDiv.onmousedown
=
fun;//ps:函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数,
而不是鼠标按下时执行;
b.有参数:
frameDiv.onmousedown
=
function(){
fun(this);
}
c.要调用的函数;
function
fun(){
alert("鼠标按下");
}
4.如果担心创建的标签没有被覆盖则可以替换:
var
divFlag
=
document.getElementById("divFlag");
var
divMain
=
document.createElement("div");
if(divFlag
!=
null){
body.replaceChild(divMain,
divFlag);//把原来的替换掉
}
divMain.setAttribute("id",
"divFlag");
以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:JS实现给对象动态添加属性的方法JS中动态创建元素的三种方法总结(推荐)js动态创建标签示例代码使用变量动态设置js的属性名
怎么动态生成js变量
动态生成全局变量:
//简单的用字符串作为变量名
window['hello'] = "hello, world";
alert(hello); //批量定义for(var i=0; i10; i++) { var varname="var"+i; window[varname] = "value"+i;}alert(var0);alert(var9);
http:
解释:所有的全局变量都存在window变量里。window是个js本身定义的变量,类型为object。
访问全局变量var0 相当于访问window.var0,也相当于window["var0"]。
局部变量最好用object吧:http:
function test() { var vars = {}; // 简单的字符串作为变量名 vars['hello'] = "hello, world!"; alert(vars.hello); //批量定义 for(var i=0; i10; i++) { var varname="var"+i; vars[varname] = "value"+i; } alert(vars.var0); alert(vars.var9);
js如何动态添加数组?
js动态添加数组可以按下面的步骤:
1、在数组的开头添加新元素 - unshift()
源代码:
!DOCTYPE html
html
body
p id="demo"Click the button to add elements to the array./p
button onclick="myFunction()"Try it/button
script
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
/script
pbNote:/b The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be emundefined/em./p
/body
/html
测试结果:
Lemon,Pineapple,Banana,Orange,Apple,Mango
2、在数组的第2位置添加一个元素 - splice()
源代码:
!DOCTYPE html
html
body
p id="demo"Click the button to add elements to the array./p
button onclick="myFunction()"Try it/button
script
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
/script
/body
/html
测试结果:
Banana,Orange,Lemon,Kiwi,Apple,Mango
3、数组的末尾添加新的元素 - push()
源代码:
!DOCTYPE html
html
body
p id="demo"Click the button to add a new element to the array./p
button onclick="myFunction()"Try it/button
script
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
/script
/body
/html
测试结果:
Banana,Orange,Apple,Mango,Kiwi
前端动态加载JS
最近机顶盒遇到一种特殊场景需要按需加载js,所以特此记录动态加载JS的方法
这个方法加载的是本地的js,如果要加载非本地js的话,应该要加上crossorigin头。