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

So erstellen Sie dynamisch Tags und legen Attribute in js fest

小云云Original: 2018-02-26 09:08:422748Durchsuche

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 bestimmtes Tag: Erstellen Sie eine Instanz von p im Textkörper

<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 : zum erstellten Tag entsprechende Attribute hinzufügen:

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. Erstelltes Tag-Hinzufügen-Ereignis:

a Ohne Parameter:

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

b Parameter:

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

c. Die aufzurufende Funktion

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

4. Wenn Sie befürchten, dass das erstellte Tag nicht überschrieben wird, können Sie es ersetzen:

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

Verwandte Empfehlungen:

JS-Tag-Codebeispiel für die dynamische Erstellung

PHP Create Tag Cloud Function Code_PHP Tutorial

JS erstellt dynamisch Label-Beispielcode_Javascript-Kenntnisse

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

php JS 事件

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：So lösen Sie einige einfache Berechnungsprobleme mit JSNächster Artikel：So lösen Sie einige einfache Berechnungsprobleme mit JS

In Verbindung stehende Artikel

Mehr sehen