Maison > Article > interface Web > Méthodes courantes d'insertion à l'intérieur des nœuds DOM

Méthodes courantes d'insertion à l'intérieur des nœuds DOM

一个新手original: 2017-09-30 09:45:481619parcourir

1. Insérer append() et appendTo() dans le DOM

Il ne suffit pas de créer dynamiquement des éléments, ils ne sont que temporairement stockés en mémoire, et finalement nous devons les mettre dans le document de la page. et le présenter. 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 de fonctionnement.

Sélecteur

Description

append()

选择器	描述
append()	向每个匹配的元素内部追加内容或追加子节点
appendTo()	把所有匹配的元素追加到另一个指定的元素集合中

Ajouter du contenu à chaque élément correspondant ou Ajouter des nœuds enfants

appendTo()

Ajouter tous les éléments correspondants à une autre collection d'éléments spécifiée

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

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.

<!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>
    <h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>

    <p class="content"></p>

    <script type="text/javascript">

        $("#bt1").on(&#39;click&#39;, function() {            //.append(), 内容在方法的后面，
            //参数是将要插入的内容。            
            $(".content").append(&#39;<p class="append">通过append方法添加的元素</p>&#39;)
        })    </script>
    <script type="text/javascript">
        $("#bt2").on(&#39;click&#39;, function() {            //.appendTo()刚好相反，内容在方法前面，
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。            
            $(&#39;<p class="appendTo">通过appendTo方法添加的元素</p>&#39;).appendTo($(".content"))
        })    
 </script>
 </body>
 </html>

Un bref résumé :

Les deux méthodes .append() et .appendTo() ont la même fonction. syntaxe—— Les positions du contenu et de la cible sont différentes

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

2. Insérez prepend() et prependTo() dans le DOM

选择器

描述

prepend()

在被选元素的开头插入内容

prependTo()

把所有匹配的元素前置到指定的元素集合中

提示：就是颠倒了的

prepend()

Méthodes pour opérer à l'intérieur de l'élément, 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, vous pouvez également l'insérer avant l'élément sélectionné. Les méthodes fournies par jQuery sont prepend et prependTo.

prepend() td>

Sélecteur

Description

Insérer du contenu au début de l'élément sélectionné

prependTo ()

Préparer tous les éléments correspondants dans la collection d'éléments spécifiée

<span style="color: #000000">.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).<br>.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同<br>对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数<br>而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。<br><br></span>

Conseils : C'est à l'envers

prepend()

<!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>
    .aaron1{
        border: 1px solid red;
    }
    .aaron1 p {
        color: red;
    }
    .aaron2{
        border: 1px solid blue;
    }
    .aaron2 p {
        color: blue;
    }
    </style></head><body>
    <h2>通过prepend与prependTo添加元素</h2>
    <button id="bt1">点击通过jQuery的prepend添加元素</button>
    <button id="bt2">点击通过jQuery的prependTo添加元素</button>
    <p class="aaron1">
        <p>测试prepend</p>
    </p>
    <p class="aaron2">
        <p>测试prependTo</p>
    </p>
    <script type="text/javascript">
    $("#bt1").on(&#39;click&#39;, function() {        //找到class="aaron1"的p节点
        //然后通过prepend在内部的首位置添加一个新的p节点        $(&#39;.aaron1&#39;)
            .prepend(&#39;<p>prepend增加的p元素</p>&#39;)
    })    </script>
    <script type="text/javascript">
    $("#bt2").on(&#39;click&#39;, function() {        //找到class="aaron2"的p节点
        //然后通过prependTo内部的首位置添加一个新的p节点        $(&#39;<p>prependTo增加的p元素</p>&#39;)
            .prependTo($(&#39;.aaron2&#39;))
    })    
    </script>
   </body>
 </html>

L'utilisation et la différence entre prepend et prependTo :

append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

Voici un résumé des différences entre les quatre modes de fonctionnement interne :

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir plusieurs valeurs sélectionnées dans la case à cocher en jsArticle suivant：Comment obtenir plusieurs valeurs sélectionnées dans la case à cocher en js

Articles Liés

Voir plus