A case study of Dom tree operation in jquery using reverse insertion method _jquery

This example describes the use of a reverse insertion method for DOM tree operations in jquery. Share to everyone for your reference. The specific analysis is as follows:

Using the Reverse insertion method

Here we first insert the created content in front of the element and then insert the same element into another location in the document. Typically, when manipulating elements in jquery, the consonant method is simpler and more efficient. But we can't do that now because this is the goal of. InsertBefore (), the content of. Appendto (). At this point, using the reverse insertion method can help us solve the problem.

Like. InsertBefore () and. Appendto (), there is generally a corresponding reverse method. The reverse method also performs the same operation, except that "target" and "content" are the opposite. For example:

Copy Code code as follows:

$ (' <p>Hello</p> '). Appendto (' #container ');

The same as the following code results:

Copy Code code as follows:

$ (' #container '). Append (' <p>Hello</p> ');

Below we use. Before () instead of. InsertBefore () to refactor the code, see the following code:

Copy Code code as follows:

$ (document). Ready (function () {
var $notes = $ (' <ol id= notes ></ol> ')
. InsertBefore (' #footer ');
$ (' span.footnote '). each (function (index) {
$ (This)
. Before (' ^{' + (index + 1) + '} ')
. Appendto ($notes)
. Wrap (' <li></li> ');
});
});

Insert Method Callback

The reverse insertion method can accept a function as a parameter, similar to the. attr () and. css () methods. This incoming function is invoked for each target element, returning the inserted HTML string. You can actually use this technique here, but since you need to repeat the same action for each footnote, use a. each () method to make it clearer.

Now we can consider the last step: Create a link to a matching footnote in the appropriate location in the body and create a link in the footnote to the body location. To do this, each footnote requires 4 markers: two links, one in the body, one in the footnote, and two ID attributes. Because of this, the parameters of the Before () method become complex, so it is necessary to use a new method of creating strings here.
In the above code, we use the operator to stitch the string. Using the + operator although no problem, but
If there are too many strings to be spliced, it will look messy. So, here we use the. Join () method of the array to build a larger array. In other words, the following two lines of code result the same.

Copy Code code as follows:

var str = ' A ' + ' B ' + ' C ';
var str = [' A ', ' B ', ' C '].join (');

Although this example requires more characters to be lost, using the. Join () method avoids the confusion caused by too many strings to be spliced. Let's take a look at the sample code below, which is the process of creating a string using. Join ().

Copy Code code as follows:

$ (document). Ready (function () {
var $notes = $ (' <ol id= ' notes ' ></ol> '). InsertBefore (' #footer '); $ (' span.footnote '). each (the function (index) {$ (this)
. before ([
' ^{', index + 1,
'} '
].join (")"
. Appendto ($notes)
. Wrap (' <li></li> ');
});
});

note that because each element of the array performs the operation separately, it is no longer necessary to put the index+1 in parentheses. With this technique, you can add a link to the bottom of the page and a unique ID value for the footnote label. Also, in the following method, add the corresponding id attribute to the <li> element so that the link has a matching target, see the following code:

Copy Code code as follows:

$ (document). Ready (function () {
var $notes = $ (' <ol id= ' notes ' ></ol> '). InsertBefore (' #footer '); $ (' span.footnote '). each (the function (index) {$ (this)
. before ([
' <a href= ' #footnote-', index + 1,
' "id=" context-', index + 1,
' "class=" context ">",
' ^{', index + 1,
'}</a> '
].join (")"
. Appendto ($notes)
. Wrap (' <li id=mfootnote-' + (index + 1) + im></li> ');
});
});

After you add these tags, each footnote label has a link to the corresponding footer at the bottom of the page. All that remains is to create a link in the footnote that points to its context. To do this, you can use the reverse method of. Appendto (). Append (), see the following code:

Copy Code code as follows:

$ (document). Ready (function () {
var $notes = $ (' <ol id= ' notes__></ol> ')
. InsertBefore (' #footer ');
$ (' span.footnote '). each (function (index) {
$ (This)
. before ([
' <a href= ' #footnote-', index + 1,
' "id=" context-', index + 1,
' class = ' context__> ',
' ^{', index + 1,
'}</a> '
].join (")"
. Appendto ($notes)
. append ([
' (<a href= "#context-', index + 1,
' __>context</a> '
].join (")"
. Wrap (' <li id= ' footnote-' + (index + 1) + ' __></li> ');
});
});

Notice that the href here points to the ID in the footnote label. In the run result, you can see the footnote that contains the new link.

I hope this article will help you with your jquery programming.