通過在js動態中創建標簽,并設置屬性方法（詳細教程）

來源：懂視網責編：小OO 時間：2020-11-27 19:41:05

通過在js動態中創建標簽,并設置屬性方法（詳細教程）

當在寫jsp頁面時，往往會遇到這種情況：從后臺獲取的數據個數不確定，此時在前端寫jsp頁面時也就不確定怎么設計了。這個時候就需要通過js動態創建標簽。1.創建某個標簽：如下在body中創建一個p的事例。

推薦度：

點擊下載本文 文檔為doc格式

導讀當在寫jsp頁面時，往往會遇到這種情況：從后臺獲取的數據個數不確定，此時在前端寫jsp頁面時也就不確定怎么設計了。這個時候就需要通過js動態創建標簽。1.創建某個標簽：如下在body中創建一個p的事例。

下面我就為大家分享一篇通過js動態創建標簽，并設置屬性方法，具有很好的參考價值，希望對大家有所幫助。

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

1.創建某個標簽：如下在body中創建一個p的事例；

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

2.添加屬性：給創建的標簽添加相應的屬性：

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

3.創建的標簽添加事件：

a.不帶參數：

framep.onmousedown = fun;//ps：函數名fun后面一定不能帶括號，否則會在創建標簽的時候執行函數， 而不是鼠標按下時執行；

b.有參數：

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

c.要調用的函數；

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

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

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

上面是我整理給大家的，希望今后會對大家有幫助。

在jQuery中實現標簽子元素的添加和賦值方法

在jQuery中如何改變P標簽文本值

在vue cli webpack中如何使用sass（詳細教程）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com