动态js,动态js文件

本文目录一览：

• 1、网页的动态JS在哪找？
• 2、通过js动态创建标签,并设置属性方法
• 3、怎么动态生成js变量
• 4、js如何动态添加数组？
• 5、前端动态加载JS

网页的动态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头。