Générez dynamiquement des éléments HTML et ajoutez des attributs aux éléments-tutoriel HTML-php.cn

Générez dynamiquement des éléments HTML et ajoutez des attributs aux éléments

不言

Libérer： 2018-04-26 17:03:24

original

2606 Les gens l'ont consulté

Cet article présente principalement la génération dynamique d'éléments HTML et l'ajout d'attributs aux éléments. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à

Comment générer dynamiquement des éléments HTML. Il existe trois types :

Le premier : document.createElement() crée un élément, puis utilise la méthode appendChild() pour ajouter l'élément au nœud spécifié

ajoute un élément :

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </body>  <script>  
    var link = document.createElement(&#39;a&#39;);  
    link.setAttribute(&#39;href&#39;,&#39;#&#39;);  
    link.setAttribute(&#39;id&#39;,&#39;login&#39;);  
    link.style.color = &#39;green&#39;;  
    link.innerHTML = &#39;登录&#39;;  
    var main = document.getElementById(&#39;main&#39;);  
    main.appendChild(link);  
</script>  </html>

Copier après la connexion

Deuxième : utilisez innerHTML pour ajouter des éléments directement au nœud spécifié :

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </body>  <script>  
    var link = document.createElement(&#39;a&#39;);  
    //使用innerHTML将元素直接添加到指定节点  
    main.innerHTML = "<a href=&#39;#&#39; id=&#39;login&#39; style=&#39;color: red;&#39;>登录</a>";  

</script>  </html>

Copier après la connexion

Troisième : jQueryCréer un nœud
Créez un objet DOM dans jQuery et utilisez celui de jQuery fonction d'usine $() Terminé, le format est le suivant :

$(html);

$(html) créera un objet DOM basé sur la chaîne de balisage HTML transmise et l'enveloppera Objet DOM dans Un objet jQuery est renvoyé

Insérez le nœud créé dans jQuery dans le texte, utilisez des méthodes telles que append()

Les méthodes d'insertion de nœuds dans jQuery sont :

1.append() : Ajouter du contenu à chaque élément correspondant
2 appendTo() : Ajouter tous les éléments correspondants à l'élément spécifié, en inversant la méthode $(A).append(B) normale, et non. Ajoutez B à A, mais ajoutez A à B
3.prepend()Méthode : ajoutez le contenu à l'intérieur de chaque élément correspondant
4.prependTo() : ajoutez tout le contenu correspondant à l'élément spécifié, inverser la méthode prpend()
5.after() Insérer du contenu après chaque élément correspondant
6.insertAfter() Insérer tous les éléments correspondants après l'élément spécifié, en inversant la méthode after()
7.before()Insérer le contenu avant chaque élément correspondant
8.insertBefore() Chaque élément correspondant est inséré avant le contenu spécifié, et la méthode before() est inversée

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  
    <script src="jquery-1.11.1.min.js"></script>  
    <script>  
    $(function(){  
    var $link=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);  
        $(&#39;#main&#39;).append($link);  

    })  
    </script>  </head>  <body>  <p id="main"></p>  </body>  </html>

Copier après la connexion

javascript ajoute dynamiquement l'élément html

Il existe deux solutions principales :
1. Utilisez DOM

    //使用createElement创建元素
    var dialog = document.createElement(&#39;p&#39;);    
    var img = document.createElement(&#39;img&#39;);    
    var btn = document.createElement(&#39;input&#39;);    
    var content = document.createElement(&#39;span&#39;);    // 添加class
    dialog.className = &#39;dialog&#39;;    // 属性
    img.src = &#39;close.gif&#39;;    // 样式
    btn.style.paddingRight = &#39;10px&#39;;    // 文本
    span.innerHTML = &#39;您真的要GG吗？&#39;;    // 在容器元素中放入其他元素
    dialog.appendChild(img);
    dialog.appendChild(btn);
    dialog.appendChild(span);

Copier après la connexion

2.

var popContent =[                
&#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;,                  
&#39;<span class="checkbox-unchecked"></span>&#39;,                  
&#39;<span class="monitory-text" title="&#39;+name+&#39;">&#39;+formedName+&#39;</span>&#39;,                
&#39;</li>&#39;
                ].join(&#39; &#39;);
$(&#39;.document&#39;).append(popContent);

Copier après la connexion

<p class="se-preview-section-delimiter"></p>

Copier après la connexion

ou utilisez cette méthode d'écriture

var popContent =  &#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;+                  
&#39;<span class="checkbox-unchecked"></span>&#39;+                  
&#39;<span class="monitory-text" title="&#39;+name+&#39;">&#39;+formedName+&#39;</span>&#39;+                
&#39;</li>&#39;;
$(&#39;.document&#39;).append(popContent);

Copier après la connexion

Recommandations associées :

Explication détaillée de l'événement de clic sur l'élément HTML de l'opération jQuery

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!