jQuery节点追加

节点追加

父子关系追加

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

实例如下：

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function  f1(){
            //主动追加
            //新节点追加
            //append() 后置 
            $("#yi").append("<li>成都市</li>");
            //prepend() 前置 
            $("#yi").prepend("<li>杭州市</li>");

            //已有节点追加(节点发生物理位置移动)
            $("#yi").append($("#gai"));
        }
        function f2(){
            //被动追加
            //appendTo  后置追加
            //prependTo  前置追加
            //新节点追加
            $("<li>武汉市</li>").appendTo('#yi');
            $("<li>天津市</li>").prependTo('#yi');
            //$("html标签")---创建节点--->createElement等方法
            //已有节点追加
            $('#er li:eq(1)').appendTo('#yi');
        }
        </script>
        <style type="text/css">
        div {width:300px; height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <ul id="yi">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
        <ul id="er">
            <li>福州市</li>
            <li>合肥市</li>
            <li id="gai">郑州市</li>
        </ul>
        <input type="button" value="追加1" onclick="f1()" />
        <input type="button" value="追加2" onclick="f2()" />
    </body>
</html>

兄弟关系追加

after(content):在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
insertBefore(content):把所有匹配的元素插入到另一个、指定的元素集合的前面

实例如下：

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function  f1(){
            //主动追加
            //after()  后置追加
            //before()  前置追加
            //新节点
            $('#yi li:last').after("<li>深圳</li>");
            $('#yi li:first').after("<li>成都市</li>");
            $('#fei').before("<li>杭州市</li>");
            //已有节点追加
            $('#fei').after($('#gai'));
        }
        </script>
        <style type="text/css">
        div {width:300px; height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <ul id="yi">
            <li>北京</li>
            <li id="fei">上海</li>
            <li>广州</li>
        </ul>
        <ul id="er">
            <li>福州市</li>
            <li>合肥市</li>
            <li id="gai">郑州市</li>
        </ul>
        <input type="button" value="追加1" onclick="f1()" />
    </body>
</html>

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ //主动追加 //新节点追加 //append() 后置 $("#yi").append("<li>成都市</li>"); //prepend() 前置 $("#yi").prepend("<li>杭州市</li>"); //已有节点追加(节点发生物理位置移动) $("#yi").append($("#gai")); } function f2(){ //被动追加 //appendTo 后置追加 //prependTo 前置追加 //新节点追加 $("<li>武汉市</li>").appendTo('#yi'); $("<li>天津市</li>").prependTo('#yi'); //$("html标签")---创建节点--->createElement等方法 //已有节点追加 $('#er li:eq(1)').appendTo('#yi'); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> </head> <body> <ul id="yi"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> <ul id="er"> <li>福州市</li> <li>合肥市</li> <li id="gai">郑州市</li> </ul> <input type="button" value="追加1" onclick="f1()" /> <input type="button" value="追加2" onclick="f2()" /> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

jQuery节点追加

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]