So erstellen Sie dynamisch Tags und legen Attribute in js fest-js-Tutorial-php.cn

So erstellen Sie dynamisch Tags und legen Attribute in js fest

小云云

Freigeben： 2018-02-26 09:08:42

Original

2763 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 = "要显示的值";

Nach dem Login kopieren

3. Erstelltes Tag-Hinzufügen-Ereignis:

a Ohne Parameter:

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

Nach dem Login kopieren

b Parameter:

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

Nach dem Login kopieren

c. Die aufzurufende Funktion

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

Nach dem Login kopieren

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");

Nach dem Login kopieren

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!