Analytical jQuery source (twenty-three) Module replacement operation of the DOM element Explanation

This section at said operating module DOM replaced elements in the module, which matches the current element may replace the specified DOM element, there are two methods, as follows:

replaceWith (value); provide new content used to replace the matching of each of the set of elements. value is the new content may be a string html, DOM elements, jQuery new content object or function return.
replaceAll (value); a matching element in the set of elements of a replacement element. Internal execution .replaceWith (value) method, but the order of the different syntax. Similar to append () and appendTo ().

For chestnut:

writer by: Desert QQ: 22969969

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div id="test"><i>Hello World!</i></div>
    <Button ID = "B1" > Test. 1 </ Button > 
    < Button ID = "B2" > Test 2 </ Button > 
    < Script > 
        b1.onclick = function () {       // content of #test with The replaceWith () method 
            $ ( ' #test ' ) .replaceWith ( ' <h1 of ID = "Test"> the jQuery the Hello! </ h1 of> ' ) 
        }       
        B2.the onclick = function () {       // content of #test with the replaceAll () method 
            $ ('<p id="test">jQuery is Good!</p>').replaceAll('#test')
        }
    </script>
</body>
</html>

Render as follows:

When you click the Test button 1, page rendering is as follows:

When you click the Test 2 button, the page becomes as follows:

Source code analysis

The replaceWith implement () is relatively simple, as follows:

jQuery.fn.extend ({ 
    The replaceWith: function (value) {                  // replace each element .value matching element in the set of new content, it may be a string html, DOM element provided with a new content, jQuery object or return function new content. 
        IF ( the this [0] && the this [0] .parentNode) {              // if at least one matching element, which element has a parent element 
            // the Make Sure the elements that are removed from the DOM the before They are inserted The 
            // the this Replacing CAN FIX A parent Help with Child elements 
            IF (jQuery.isFunction (value)) {              // if the value is a function 
                return  the this .each ( function (I) {                     // iterate set of matching elements
                    var Self = the jQuery ( the this ), Old = self.html (); 
                    self.replaceWith (value.call ( the this , I, Old));      // call the function value for every element, and a return value of the function calling iteration The replaceWith () function. 
                }); 
            } 

            IF ( typeof ! Value == "String") {                 // if the parameter value is not a string, it may be DOM element or jQuery object 
                value = jQuery (value) .detach ();                 // create a value a jQuery object, then call .detach () the parameter value is deleted from the document, to retain the associated data and events. 
            } 

            Return  the this .each ( function () {                     // iterate current matching elements
                var Next = the this .nextSibling,                     // next element reference node 
                    parent = the this .parentNode;                     // a node referenced element 

                the jQuery ( the this ) .remove ();                         // call .remove () to remove the current element and descendant elements associated data and events, to avoid memory leaks. 

                IF (Next) {                                     // If there is a next element of 
                    the jQuery (Next) .before (value);                     // is called $ .fn.before () function to insert new content before the next sibling; 
                } the else {     
                    the jQuery (parent ) .append (value);                    // else calls $ .fn.append () function of the new content will be inserted at the end of the parent element. 
                } 
            }); 
        } The else {
             return  the this .length?
                 The this .pushStack (the jQuery (jQuery.isFunction (value) value (): value?), "The replaceWith" , value):
                 the this ; 
        } 
    }, 
})

Relatively simple, is to call remove () before the current is removed, append before then calls a node before () or parent node () method to insert a new node can be, for replaceAll (), it and insert elements that Like several methods, it is another way of expressing replaceWith (), you can look at this link: https: //www.cnblogs.com/greatdesert/p/11732436.html

Analytical jQuery source (twenty-three) Module replacement operation of the DOM element Explanation

Guess you like