Maison >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
- 不言original
- 2018-04-26 17:03:242604parcourir
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!