Maison > Article > interface Web > Jquery peut-il ajouter des éléments à la page ?
Jquery peut-il ajouter des éléments à la page ?
- WBOYoriginal
- 2022-06-09 16:47:131783parcourir
jquery peut ajouter des éléments à la page. Méthode d'ajout : 1. Utilisez "Element Object.append("Insert Content")" pour ajouter des éléments à la fin de l'élément ; 2. Utilisez "Element Object.prepend("Insert Content")" pour ajouter des éléments au début de l'élément. l'élément ; 3. Utilisez "Element object.after("Insert content")" pour ajouter des éléments après l'élément sélectionné ; 4. Utilisez "Element object.before("Insert content")" pour ajouter des éléments après l'élément sélectionné ;
L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.4.1, ordinateur Dell G3.
Jquery peut-il ajouter des éléments à la page
jquery peut ajouter des éléments à la page
append() - Insérer du contenu à la fin de l'élément sélectionné
$(selector).append(content,function(index,html))
L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>插入项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落</p>
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<button id="btn1">插入文本</button>
<button id="btn2">插入列表项</button>
</body>
</html>Résultat de sortie :
prepend() - insérer du contenu
au début de l'élément sélectionné :
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend(" <b>插入文本</b>.");
});
$("#btn2").click(function(){
$("ol").prepend("<li>插入项</li>");
});
});Résultat de sortie :
- after() - Insérer du contenu après l'élément sélectionné
$(document).ready(function(){ $("#btn1").click(function(){ $("p").after(" <b>插入文本</b>."); }); $("#btn2").click(function(){ $("ol").after("<li>插入项</li>"); }); });Résultat de sortie :
- before() - Insérer du contenu avant l'élément sélectionné
-
$(document).ready(function(){ $("#btn1").click(function(){ $("p").before(" <b>插入文本</b>."); }); $("#btn2").click(function(){ $("ol").before("<li>插入项</li>"); }); });Résultat de sortie :
Vidéo recommandation de tutoriel :
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!