suchen

Heim >Web-Frontend >js-Tutorial >Gängige Methoden zum Einfügen in DOM-Knoten

Gängige Methoden zum Einfügen in DOM-Knoten

一个新手
一个新手Original
2017-09-30 09:45:481679Durchsuche

1. Einfügen von append() und appendTo() in das DOM

Es reicht nicht aus, Elemente dynamisch zu erstellen. Schließlich müssen wir sie nur vorübergehend im Speicher ablegen Präsentiere es. Die Frage ist also: Wie fügt man es in das Dokument ein?

Dabei handelt es sich um eine Positionsbeziehung. Es ist üblich, dieses neu erstellte Element als untergeordnetes Element eines bestimmten Elements auf der Seite einzufügen. Für eine solche Verarbeitung definiert jQuery zwei Operationsmethoden.

Selektor Beschreibung
append()
选择器 描述
append()

向每个匹配的元素内部追加内容或追加子节点
appendTo()

把所有匹配的元素追加到另一个指定的元素集合中
Inhalt an jedes passende Element anhängen oder untergeordnete Knoten anhängen
appendTo() Alle passenden Elemente an eine andere angegebene Elementsammlung anhängen
append: Dieser Vorgang ähnelt der Ausführung der nativen appendChild-Methode für die angegebenen Elemente, um sie dem Dokument hinzuzufügen.


appendTo: Tatsächlich kehrt die Verwendung dieser Methode die herkömmliche $(A).append(B)-Operation um, d. h. statt B an A anzuhängen, wird A an B angehängt. 

<!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>

Eine kurze Zusammenfassung:


Die beiden Methoden .append() und .appendTo() haben die gleiche Funktion. Der Hauptunterschied besteht darin Syntax – Die Positionen des Inhalts und des Ziels sind unterschiedlich 

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

2. Fügen Sie prepend() und prependTo() in das DOM ein
选择器 描述
prepend()

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

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

 提示： 就是颠倒了的

prepend()

Methoden zum Arbeiten innerhalb des Elements. Zusätzlich zum Einfügen des angegebenen Inhalts am Ende des ausgewählten Elements (noch innerhalb) über append und appendTo können Sie ihn auch vor dem ausgewählten Element einfügen. Die von jQuery bereitgestellten Methoden sind prepend und prependTo.

prepend() td>
Selektor Beschreibung

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

Tipps: Es steht auf dem Kopf

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>
Die Verwendung und der Unterschied zwischen prepend und prependTo: 


append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中
Hier ist eine Zusammenfassung der Unterschiede zwischen den vier Methoden des internen Betriebs:

Das obige ist der detaillierte Inhalt vonGängige Methoden zum Einfügen in DOM-Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So aktivieren Sie mehrere Werte im Kontrollkästchen in jsNächster Artikel：So aktivieren Sie mehrere Werte im Kontrollkästchen in js

In Verbindung stehende Artikel

Mehr sehen