jQuery DOM operations replaceWith() and replaceAll()

Before, we learned the inner insertion, outer insertion and deletion methods of nodes. In this section, we will learn the replacement method replaceWith

.replaceWith(newContent): replace all matching elements in the collection with the provided content and return the Delete a collection of elements

Simply put: use $() to select node A, call the replaceWith method, and pass in a new content B (HTML string, DOM element, or jQuery object) to replace the selected Node A

Look at a simple example: a piece of HTML code

<div>
<p>First paragraph</p>
<p>Second paragraph Paragraph</p>
<p>The third paragraph</p>
</div>

Replace the nodes and content of the second paragraph

$("p:eq(1)").replaceWith('<a style="color:red">Replace the content of the second paragraph</a>')

Filter out the second p element through jQuery and call replaceWith to replace it. The result is as follows

<div>
<p>First paragraph</p>
<a style ="color:red">Replace the content of the second paragraph</a>'
<p>The third paragraph</p>
</div>

.replaceAll( target ): Replace each target element with the matching element of the collection

.replaceAll() and .replaceWith() have similar functions, but the target and source are opposite. Use the above HTML structure, we use replaceAll to process

$('<a style="color:red">replace the content of the second paragraph</a>').replaceAll('p:eq( 1)')

Summary:

replaceAll() and .replaceWith() have similar functions, the main difference is the location of the target and source

replaceWith() and The .replaceAll() method will delete all data and event handlers associated with the node

The replaceWith() method, like most other jQuery methods, returns a jQuery object, so it can be chained with other methods

The jQuery object returned by the replaceWith() method refers to the node before replacement, not the node after replacement through the replaceWith/replaceAll method

Look at the following example:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>

    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">点击,通过replaceWith替换内容</button>
        <button class="bt2">点击,通过rreplaceAll替换内容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
    //只克隆节点
    //不克隆事件
    $(".bt1").click(function(){
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到内容为第六段的p元素
    //通过replaceAll删除并替换这个节点
    $(".bt2").click(function() {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
    </script>
</body>

</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> .right div { background: yellow; } </style> </head> <body> <h2>replaceWith()和replaceAll()</h2> <div class="left"> <button class="bt1">点击,通过replaceWith替换内容</button> <button class="bt2">点击,通过rreplaceAll替换内容</button> </div> <div class="right"> <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> <div> <p>第四段</p> <p>第五段</p> <p>第六段</p> </div> </div> <script type="text/javascript"> //只克隆节点 //不克隆事件 $(".bt1").click(function(){ //找到内容为第二段的p元素 //通过replaceWith删除并替换这个节点 $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>') }) </script> <script type="text/javascript"> //找到内容为第六段的p元素 //通过replaceAll删除并替换这个节点 $(".bt2").click(function() { $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last'); }) </script> </body> </html>

submit Reset Code

Automatic operation

jQuery DOM operations replaceWith() and replaceAll()

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]