動態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頭。