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

小云云original: 2018-02-26 09:08:422741parcourir

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 certaine balise : créez une instance 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. : à la balise créée Ajoutez les attributs correspondants :

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. Balise créée ajoutant l'événement :

a Sans paramètres :

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

b. paramètres :

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

c. La fonction à appeler

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

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

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

Recommandations associées :

Exemple de code de balise de création dynamique JS

PHP Créer une fonction de nuage de balises code_PHP tutoriel

js crée dynamiquement des exemples de compétences code_javascript d'étiquette

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!

php JS 事件

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：Comment résoudre quelques problèmes de calcul simples avec JSArticle suivant：Comment résoudre quelques problèmes de calcul simples avec JS

Articles Liés

Voir plus