How to Use the reverse Insertion Method for DOM tree operations in jQuery

This article describes how to use the reverse insert method for DOM tree operations in jQuery. The example shows how to use the reverse insert method and the insert method callback, for more information about how to use the reverse insert method for DOM tree operations in jQuery, see the following example. Share it with you for your reference. The specific analysis is as follows:

Use reverse insert

Here we first Insert the created content to the front of the element, and then insert the same element to another position in the document. In general, when you operate on elements in jQuery, the concatenation method is simpler and more effective. However, we cannot do this now, because this is the goal of. insertBefore (), which is the content of. appendTo. In this case, the reverse insertion method can help us solve the problem.

There is usually a reverse method for inserting people like. insertBefore () and. appendTo. The reverse method also performs the same operation, except that the "target" and "content" are the opposite. For example:

The Code is as follows:

$ ('

Hello

'). AppendTo (' # iner ');

The result is the same as the following code:

The Code is as follows:

$ ('# Iner'). append ('

Hello

');

Next we will use. before () instead of. insertBefore () to refactor the code. See the following code:

The Code is as follows:

$ (Document). ready (function (){
Var $ notes = $ ('

')
. InsertBefore ('# footer ');
$ ('Span. footnote '). each (function (index ){
$ (This)
. Before (''+ (index + 1) + '')
. AppendTo ($ notes)
. Wrap ('

');
});
});

Insert method callback

The reverse plug-in allows you to accept a token as an example, which is similar to the .attr()and .css () methods. The input function calls each target element and returns the inserted HTML string. This technology can also be used here, but since it is necessary to repeat the same operation for each footer, it is clearer to use a. each () method.

Now, we can consider the last step: create a link pointing to a matched footer in the body and a link pointing to the body in the footer. Therefore, each footer must be marked at four points: two links, one in the body, one in the footer, and two id attributes. As a result, the parameters of the pass-by. before () method become complex, so it is necessary to use a new method to create strings here.
In the above Code, we use operators to concatenate strings. Although the + operator is correct
If you want to splice too many strings, it looks messy. Therefore, here we use the. join () method of the array to construct a larger array. In other words, the following two lines of code have the same results.

The Code is as follows:

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

Although this example requires more characters to be input, using the. join () method can avoid confusion caused by too many strings to be concatenated. Let's take a look at the sample code. The following code is the process of using. join () to create a string.

The Code is as follows:

$ (Document). ready (function (){
Var $ notes = $ ('

'). InsertBefore (' # footer '); $ ('span. footnote'). each (function (index) {$ (this)
. Before ([
'', Index + 1,
''
]. Join (''))
. AppendTo ($ notes)
. Wrap ('

');
});
});

Note:Because each element of the array performs an operation separately, you no longer need to put index + 1 in brackets. With this technique, you can add a link pointing to the bottom of the page and a unique id value for the footer tag. In the following method

Add the corresponding id attribute to the element so that the link has a matching target. See the following code:

The Code is as follows:

$ (Document). ready (function (){
Var $ notes = $ ('

'). InsertBefore (' # footer '); $ ('span. footnote'). each (function (index) {$ (this)
. Before ([
''" Id = "context-', index + 1,
'"Class =" context "> ',
'', Index + 1,
''
]. Join (''))
. AppendTo ($ notes)
. Wrap ('

');
});
});

After these tags are added, each footer tag has a link pointing to the corresponding footer at the bottom of the page. All that is left is to create a link to the context in the footer. To this end, you can use the reverse method. append () of. appendTo (). See the following code:

The Code is as follows:

$ (Document). ready (function (){
Var $ notes = $ ('

');
});
});

Note:Href points to the id in the footer label. In the running result, you can see the footer containing the new link.

I hope this article will help you with jQuery programming.