通過js動態(tài)創(chuàng)建標(biāo)簽,并設(shè)置屬性方法
更新時間：2018年02月24日 09:41:52 作者：好男兒心胸像大海
下面小編就為大家分享一篇通過js動態(tài)創(chuàng)建標(biāo)簽，并設(shè)置屬性方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
當(dāng)我們在寫jsp頁面時，往往會遇到這種情況：從后臺獲取的數(shù)據(jù)個數(shù)不確定，此時在前端寫jsp頁面時也就不確定怎么設(shè)計(jì)了。這個時候就需要通過js動態(tài)創(chuàng)建標(biāo)簽：
1.創(chuàng)建某個標(biāo)簽：如下在body中創(chuàng)建一個div的事例；
<script>
function fun(){
var frameDiv = document.createElement("div");//創(chuàng)建一個標(biāo)簽
var bodyFa = document.getElementById("bodyid");//通過id號獲取frameDiv 的父類（也就是上一級的節(jié)點(diǎn)）
bodyFa .appendChild(frameDiv);//把創(chuàng)建的節(jié)點(diǎn)frameDiv 添加到父類body 中；
}
<script>
<body id="bodyid" >
<!--在此添加div標(biāo)簽-->
</body>
2.添加屬性：給創(chuàng)建的標(biāo)簽添加相應(yīng)的屬性：
frameDiv .setAttribute("id", "divid");//給創(chuàng)建的div設(shè)置id值；
frameDiv .className="divclass"; //給創(chuàng)建的div設(shè)置class；
//給某個標(biāo)簽添加顯示的值；
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要顯示的值";
3.創(chuàng)建的標(biāo)簽添加事件：
a.不帶參數(shù)：
frameDiv.onmousedown = fun;//ps：函數(shù)名fun后面一定不能帶括號，否則會在創(chuàng)建標(biāo)簽的時候執(zhí)行函數(shù)， 而不是鼠標(biāo)按下時執(zhí)行；
b.有參數(shù)：
frameDiv.onmousedown = function(){ fun(this); }
c.要調(diào)用的函數(shù)；
function fun(){
alert("鼠標(biāo)按下");
}
4.如果擔(dān)心創(chuàng)建的標(biāo)簽沒有被覆蓋則可以替換：
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)建標(biāo)簽,并設(shè)置屬性方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)在線網(wǎng)頁煙花效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡單的在線網(wǎng)頁煙花效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02![js模式化窗口問題![window.dialogArguments]](http://img.jbzj.com/images/xgimg/bcimg1.png)
js模式化窗口問題![window.dialogArguments]
這篇文章主要介紹了js模式化窗口問題![window.dialogArguments],需要的朋友可以參考下2016-10-10
javascript中驗(yàn)證大寫字母、數(shù)字和中文
本文為大家介紹下使用javascript驗(yàn)證大寫字母小寫字母，數(shù)字和中文，具體示例如下2014-01-01
JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)之this和箭頭函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
查詢條件清空將input、select的值清空，下面有個不錯的示例，需要的朋友可以了解下2014-01-01
JS+CSS實(shí)現(xiàn)的日本門戶網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的日本門戶網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果,涉及JavaScript針對頁面元素的動態(tài)遍歷及樣式動態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js詳解
這篇文章主要介紹了基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js的源碼和使用方法，并附上一個使用ImageView.js的實(shí)例，這里分享給大家，有需要的小伙伴參考下。2015-03-03
這篇文章主要介紹了郵箱下拉自動填充選擇的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼
這篇文章主要介紹了Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09