communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

jQuery insère prepend() et prependTo()

En plus d'insérer le contenu spécifié à la fin de l'élément sélectionné (toujours à l'intérieur) via append et appendTo, la méthode d'opération à l'intérieur de l'élément peut également être insérée avant l'élément sélectionné. Les méthodes fournies par jQuery sont prepend et Description. du sélecteur prependTo

:

3.png

Écrivons un exemple pour expliquer Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>prepend与prependTo</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li id="li1">php 中文网</li>
        <li id="li2">php.cn</li>
    </ul>

    <input type="button" id="ipt1" value="prepend">
    <input type="button" id="ipt2" value="prependTo">

    <script>
        $("#ipt1").click(function(){
            $('#li1').prepend("欢迎</br>");
        })

        $("#ipt2").click(function(){
            $('#li2').prepend("欢迎</br>");
        })
    </script>
</body>
</html>

Remarque : prepend( ) et .prependTo() implémentent la même fonction. La principale différence est la syntaxe, le contenu inséré et l'emplacement de la cible

Voici un résumé des différences entre les quatre méthodes de fonctionnement internes :

append() Ajouter du contenu à chaque élément correspondant

prepend() Ajouter du contenu à chaque élément correspondant

appendTo() Ajouter tous les éléments correspondants à un autre élément spécifié Dans la collection

prependTo() ajoute tous les éléments correspondants à une autre collection d'éléments spécifiée


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>prepend与prependTo</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <ul> <li id="li1">php 中文网</li> <li id="li2">php.cn</li> </ul> <input type="button" id="ipt1" value="prepend"> <input type="button" id="ipt2" value="prependTo"> <script> $("#ipt1").click(function(){ $('#li1').prepend("欢迎</br>"); }) $("#ipt2").click(function(){ $('#li2').prepend("欢迎</br>"); }) </script> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492413 joue