Maison >interface Web >tutoriel HTML >Introduction à la façon de générer dynamiquement des éléments HTML et d'ajouter des attributs aux éléments (code ci-joint)
Introduction à la façon de générer dynamiquement des éléments HTML et d'ajouter des attributs aux éléments (code ci-joint)
- 不言original
- 2018-07-21 11:35:352166parcourir
Cet article vous expliquera comment générer dynamiquement des éléments HTML et ajouter des attributs aux éléments (avec du code). Le contenu est très bon. Les amis dans le besoin peuvent s'y référer.
Il existe trois manières de générer dynamiquement des éléments HTML :
La première : document.createElement() pour créer un élément, puis utilisez la méthode appendChild() pour ajouter des éléments au nœud spécifié
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
<span id="login"></span>
</div>
</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 méthode : Utilisez innerHTML pour ajouter directement des éléments au nœud spécifié. nœud spécifié
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
<span id="login"></span>
</div>
</body>
<script>
var link = document.createElement('a');
//使用innerHTML将元素直接添加到指定节点
main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>";
</script>
</html>Troisième type : jQuery crée un nœud
jQuery Créez un objet DOM dans jQuery en utilisant la fonction d'usine $() Le format est le suivant :
$(html) créera un objet DOM basé sur le. chaîne de balisage HTML entrante et enveloppez cet objet DOM dans un objet jQuery avant de revenir à la page d'accueil.
Insérez le nœud créé dans le texte dans jQuery, utilisez append() et d'autres méthodes. Les méthodes d'insertion de nœuds dans jQuery sont :
1. : à chaque Ajouter le contenu à l'intérieur des éléments correspondants
2.appendTo() : Ajoute tous les éléments correspondants à l'élément spécifié, en inversant la méthode conventionnelle $(A).append(B), au lieu d'ajouter B à A, mais ajoutez A à B
3.prepend() : ajoutez le contenu à l'intérieur de chaque élément correspondant
4.prependTo() : prependez tout le contenu correspondant au début de l'élément spécifié, inversé avec 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 L'élément est inséré après l'élément spécifié, ce qui est inversé avec la méthode after()
7.before() : Insérer le contenu avant chaque élément correspondant
8.insertBefore() : Insérer chaque Un élément correspondant est inséré avant le contenu spécifié, inversé avec la méthode before()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.newStyle{
color:red
}
</style>
<script>
$(function(){
var link=$('<a href="#" id="link" style="color:pink">登录</a>');
$('#main').append(link).addClass("newStyle");
})
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>Recommandations associées :
Comment utiliser un tableau en HTML pour obtenir l'effet de bordure td (code)
Explication détaillée de la méthode frontale de transmission des paramètres entre les pages HTML
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!