Comment créer dynamiquement des balises et définir des attributs à l'aide de js-js tutoriel-php.cn

Comment créer dynamiquement des balises et définir des attributs à l'aide de js

php中世界最好的语言

Libérer： 2018-03-17 13:44:57

original

2606 Les gens l'ont consulté

Cette fois, je vais vous présenter la méthode de création dynamique de balises et de définition de attributs avec js. Quelles sont les précautions pour créer dynamiquement des balises et définir des attributs avec js. un cas pratique. Levez-vous et jetez un œil.

Lorsque nous écrivons des pages jsp, nous rencontrons souvent cette situation : le nombre de données obtenues en arrière-plan est incertain. À l'heure actuelle, lors de l'écriture de pages jsp sur le front-end, nous ne savons pas comment les concevoir. . À ce stade, vous devez créer dynamiquement des balises via js :

1 Créez une balise : créez un exemple de p dans le corps comme suit ; >

<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>

Copier après la connexion

2. Ajouter des attributs : Ajoutez les attributs correspondants à la balise créée :

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

Copier après la connexion

3. tag Ajouter un événement :

a. Sans paramètres :

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

Copier après la connexion

c. La fonction à appeler

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

Copier après la connexion

4. Si vous craignez que la balise créée ne soit pas écrasée, vous pouvez le remplacer :

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois ! Lecture recommandée :

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

Copier après la connexion

D3.js dessine une barre de progression dynamique

ngrok+express débogue l'interface WeChat de l'environnement local

Que faire si la diapositive de données chargée dynamiquement échoue toujours

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!