interface Web
tutoriel HTML
Générez dynamiquement des éléments HTML et ajoutez des attributs aux éléments
Générez dynamiquement des éléments HTML et ajoutez des attributs aux éléments
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('a');
link.setAttribute('href','#');
link.setAttribute('id','login');
link.style.color = 'green';
link.innerHTML = '登录';
var main = document.getElementById('main');
main.appendChild(link);
</script> </html>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('a');
//使用innerHTML将元素直接添加到指定节点
main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>";
</script> </html>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 correspondant2
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 à B3.
prepend()Méthode : ajoutez le contenu à l'intérieur de chaque élément correspondant4.
prependTo(): ajoutez tout le contenu correspondant à l'élément spécifié, inverser la méthodeprpend()5.
after()Insérer du contenu après chaque élément correspondant6.
insertAfter()Insérer tous les éléments correspondants après l'élément spécifié, en inversant la méthodeafter()7.
before()Insérer le contenu avant chaque élément correspondant8.
insertBefore()Chaque élément correspondant est inséré avant le contenu spécifié, et la méthodebefore()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=$('<a href="#" id="link" style="color:pink">登录</a>');
$('#main').append($link);
})
</script> </head> <body> <p id="main"></p> </body> </html>javascript ajoute dynamiquement l'élément html
Il existe deux solutions principales :
1. Utilisez DOM
//使用createElement创建元素
var dialog = document.createElement('p');
var img = document.createElement('img');
var btn = document.createElement('input');
var content = document.createElement('span'); // 添加class
dialog.className = 'dialog'; // 属性
img.src = 'close.gif'; // 样式
btn.style.paddingRight = '10px'; // 文本
span.innerHTML = '您真的要GG吗？'; // 在容器元素中放入其他元素
dialog.appendChild(img);
dialog.appendChild(btn);
dialog.appendChild(span);2.
var popContent =[
'<li class="monitory-point-li" indexcode="00000000001310013631">',
'<span class="checkbox-unchecked"></span>',
'<span class="monitory-text" title="'+name+'">'+formedName+'</span>',
'</li>'
].join(' ');
$('.document').append(popContent);<p class="se-preview-section-delimiter"></p>
ou utilisez cette méthode d'écriture
var popContent = '<li class="monitory-point-li" indexcode="00000000001310013631">'+ '<span class="checkbox-unchecked"></span>'+ '<span class="monitory-text" title="'+name+'">'+formedName+'</span>'+ '</li>'; $('.document').append(popContent);
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
