通過js動態(tài)創(chuàng)建標簽,并設置屬性方法

更新時間：2018年02月24日 09:41:52 作者：好男兒心胸像大海

下面小編就為大家分享一篇通過js動態(tài)創(chuàng)建標簽，并設置屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

當我們在寫jsp頁面時，往往會遇到這種情況：從后臺獲取的數(shù)據(jù)個數(shù)不確定，此時在前端寫jsp頁面時也就不確定怎么設計了。這個時候就需要通過js動態(tài)創(chuàng)建標簽：

1.創(chuàng)建某個標簽：如下在body中創(chuàng)建一個div的事例；

<script>
 function fun(){
 var frameDiv = document.createElement("div");//創(chuàng)建一個標簽
 var bodyFa = document.getElementById("bodyid");//通過id號獲取frameDiv 的父類（也就是上一級的節(jié)點）
 bodyFa .appendChild(frameDiv);//把創(chuàng)建的節(jié)點frameDiv 添加到父類body 中；
 }
<script>
<body id="bodyid" >
<!--在此添加div標簽-->
</body>

2.添加屬性：給創(chuàng)建的標簽添加相應的屬性：

frameDiv .setAttribute("id", "divid");//給創(chuàng)建的div設置id值；
frameDiv .className="divclass"; //給創(chuàng)建的div設置class；
//給某個標簽添加顯示的值；
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要顯示的值";

3.創(chuàng)建的標簽添加事件：

a.不帶參數(shù)：

frameDiv.onmousedown = fun;//ps：函數(shù)名fun后面一定不能帶括號，否則會在創(chuàng)建標簽的時候執(zhí)行函數(shù)， 而不是鼠標按下時執(zhí)行；

b.有參數(shù)：

frameDiv.onmousedown = function(){ fun(this); }

c.要調(diào)用的函數(shù)；

function fun(){ 
alert("鼠標按下");
}

4.如果擔心創(chuàng)建的標簽沒有被覆蓋則可以替換：

 var divFlag = document.getElementById("divFlag");
 var divMain = document.createElement("div");
 if(divFlag != null){
 body.replaceChild(divMain, divFlag);//把原來的替換掉
}
divMain.setAttribute("id", "divFlag");

以上這篇通過js動態(tài)創(chuàng)建標簽,并設置屬性方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: