Maison > Article > interface Web > Comment créer dynamiquement des balises et définir des attributs à l'aide de js

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

php中世界最好的语言original: 2018-03-17 13:44:572619parcourir

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>

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

3. tag Ajouter un événement :

a. Sans paramètres :

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

c. La fonction à appeler

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

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

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser JS pour résoudre des problèmes de calculArticle suivant：Utiliser JS pour résoudre des problèmes de calcul

Articles Liés

Voir plus