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

Insertion de nœuds DOM jQuery

Dans le dernier chapitre, nous avons également eu une compréhension préliminaire de certaines opérations sur les nœuds. Apprenons maintenant à insérer

Il ne suffit pas de créer dynamiquement des éléments. Il n'est que temporairement stocké en mémoire. nous devons mettre un document de page et le restituer. La question est donc de savoir comment le mettre dans le document ?
Cela implique une relation de position. Il est courant de placer cet élément nouvellement créé à l'intérieur en tant qu'élément enfant d'un certain élément sur la page. Pour un tel traitement, jQuery définit deux méthodes d'opération

QQ截图20161025142026.png

append : Cette opération est liée à l'exécution de la méthode native appendChild sur les éléments spécifiés et à leur ajout au document. similaire.

appendTo : En fait, l'utilisation de cette méthode inverse l'opération conventionnelle $(A).append(B), c'est-à-dire qu'au lieu d'ajouter B à A, ajouter A à B.

Remarque : les deux méthodes append() et .appendTo() ont la même fonction. La principale différence est la syntaxe : l'emplacement du contenu et de la cible est différent.

Append() est. précédé de l'objet inséré, suivi du contenu de l'élément à insérer dans l'objet

appendTo() est précédé du contenu de l'élément à insérer, et suivi de l'objet inséré

Expliquons-nous en détail avec un exemple : 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style>
</head>

<body>
    <button id="bt1">append添加</button>
    <button id="bt2">appendTo添加</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {
            //.append(), 内容在方法的后面，
            //参数是将要插入的内容。
            $(".content").append('<div class="append">php 中文网</div>')
        })
    </script>

    <script type="text/javascript">

        $("#bt2").on('click', function() {
            //.appendTo()刚好相反，内容在方法前面，
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。
            $('<div class="appendTo">php.cn</div>').appendTo($(".content"))
        })

    </script>

</body>

</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .content { width: 300px; } .append{ background-color: blue; } .appendTo{ background-color: red; } </style> </head> <body> <button id="bt1">append添加</button> <button id="bt2">appendTo添加</button> <div class="content"></div> <script type="text/javascript"> $("#bt1").on('click', function() { //.append(), 内容在方法的后面， //参数是将要插入的内容。 $(".content").append('<div class="append">php 中文网</div>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()刚好相反，内容在方法前面， //无论是一个选择器表达式 或创建作为标记上的标记 //它都将被插入到目标容器的末尾。 $('<div class="appendTo">php.cn</div>').appendTo($(".content")) }) </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