jQuery 노드 교체LOGIN

jQuery 노드 교체

노드 교체

  • replaceWith(content): 일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 교체

  •        ;

  •                  

    $('select')는 다음으로 대체됩니다. content

  • replaceAll(selector): 선택기와 일치하는 모든 요소를 ​​일치하는 요소로 교체

  •            

    $(' content').replaceAll(select);

  • ​​​​​​

    선택 요소를 콘텐츠로 적극적으로 교체

  • <!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(){
                //主动替换 replaceAll()
                $("#gai").replaceAll("#guan");
                //被动替换  replaceWith()
                $("#big li:first").replaceWith($('#small li:first'));
            }
            </script>
            <style type="text/css">
            div {width:300px; height:200px; background-color:pink;}
            </style>
        </head>
        <body>
            <h2>节点替换</h2>
            <ul id="big">
                <li>A</li>
                <li>B</li>
                <li id="guan">C</li>
            </ul>
            <ul id="small">
                <li>a</li>
                <li>b</li>
                <li id="gai">c</li>
            </ul>
            <input type="button" value="替换" onclick="f1()" />
        </body>
    </html>
    다음 섹션
<!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(){ //主动替换 replaceAll() $("#gai").replaceAll("#guan"); //被动替换 replaceWith() $("#big li:first").replaceWith($('#small li:first')); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> </head> <body> <h2>节点替换</h2> <ul id="big"> <li>A</li> <li>B</li> <li id="guan">C</li> </ul> <ul id="small"> <li>a</li> <li>b</li> <li id="gai">c</li> </ul> <input type="button" value="替换" onclick="f1()" /> </body> </html>
코스웨어