當我們在寫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動態創建標簽,并設置屬性方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答