Heim > Artikel > Web-Frontend > So erstellen Sie dynamisch Tags und legen Attribute mithilfe von js fest

So erstellen Sie dynamisch Tags und legen Attribute mithilfe von js fest

php中世界最好的语言Original: 2018-03-17 13:44:572575Durchsuche

Dieses Mal werde ich Ihnen die Methode zum dynamischen Erstellen von Tags und zum Festlegen von Attributen mit js vorstellen. Was sind die Vorsichtsmaßnahmen für das dynamische Erstellen von Tags und das Festlegen von Attributen mit js? Ein praktischer Fall. Stehen Sie auf und schauen Sie sich das an.

Wenn wir JSP-Seiten schreiben, stoßen wir häufig auf diese Situation: Die Anzahl der aus dem Hintergrund erhaltenen Daten ist ungewiss. Beim Schreiben von JSP-Seiten im Frontend sind wir uns derzeit nicht sicher, wie wir sie entwerfen sollen . Zu diesem Zeitpunkt müssen Sie Tags dynamisch über js erstellen:

1. Erstellen Sie ein Tag: Erstellen Sie ein Beispiel für p im Körper wie folgt; >

<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. Attribute hinzufügen: Fügen Sie dem erstellten Tag entsprechende Attribute hinzu:

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 Tag Ereignis hinzufügen:

a. Ohne Parameter:

framep.onmousedown = fun;//ps：函数名fun后面一定不能带括号，否则会在创建标签的时候执行函数， 而不是鼠标按下时执行；

c. Die aufzurufende Funktion

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

4. Sie können es ersetzen:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf PHP Chinesische Website! Empfohlene Lektüre:

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

D3.js zeichnet einen dynamischen Fortschrittsbalken

ngrok+express debuggt die WeChat-Schnittstelle der lokalen Umgebung

Was tun, wenn dynamisch geladene Datenfolien immer fehlschlagen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie dynamisch Tags und legen Attribute mithilfe von js fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie JS, um Berechnungsprobleme zu lösenNächster Artikel：Verwenden Sie JS, um Berechnungsprobleme zu lösen

In Verbindung stehende Artikel

Mehr sehen