Example analysis of using reverse insertion method for DOM tree operation in jQuery_jquery

The example in this article describes the reverse insertion method of DOM tree operation in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

Use reverse insertion method

Here we first insert the created content in front of the element, and then insert the same element into another position in the document. Generally, when manipulating elements in jQuery, it's more concise and efficient to use the concatenation method. But we have no way to do this now, because this is the target of .insertBefore() and the content of .appendTo(). At this time, using the reverse insertion method can help us solve the problem.

Insertion methods like .insertBefore() and .appendTo() generally have a corresponding reverse method. The reverse method also performs the same operation, but the "target" and "content" are reversed. For example:

Copy code The code is as follows:

$('

Hello

').appendTo(' #container');

The result is the same as the following code:

Copy code The code is as follows:

$('#container').append('

Hello');

Below we will use .before() instead of .insertBefore() to reconstruct the code, see the following code:

Copy 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 insertion method can accept a function as a parameter, similar to the .attr() and .css() methods. The function passed in will be called for each target element and return the inserted HTML string. This technique can actually be used here, but since it requires repeating the same operation for each footnote, it is clearer to use an .each() method.

Now, we can consider the final step: creating links to matching footnotes at corresponding locations in the text and links in footnotes to locations in the text. To do this, each footnote requires four tags: two links, one in the text and one in the footnote; and two id attributes. Because in this way, the parameters passed to the .before() method will become complicated, so it is necessary to use a new method of creating strings here.
In the above code, we use the operator to concatenate strings. Although there is no problem using the operator,
If you have too many strings to concatenate, it will look messy. So, we use the .join() method of the array here to build a larger array. In other words, the following two lines of code have the same result.

Copy code The code is as follows:

var str = 'a' 'b' 'c';
var str = ['a', 'b', 'c'].join('');

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

Copy code 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 that since each element of the array will perform operations separately, there is no need to put index 1 in parentheses. Using this technique, you can add a link to the bottom of the page and a unique id value for the footer tag. At the same time, in the following method, the corresponding id attribute must also be added to the

element so that the link has a matching target. See the following code:

Copy code 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('

');
});
});

With these tags added, each footnote tag will have a link to the corresponding footnote at the bottom of the page. All that's left is to create a link to its context in the footnote. To do this, you can use .append(), the reverse method of .appendTo(), see the following code:

Copy code The code is as follows:

$(document).ready(function() {
var $notes = $('

'"id="context-', index 1,
'"class = "context__>',
'^{', index 1,
'}'
].join(''))
.appendTo($notes)
.append([
' (');
});
});

Note that the href here points to the id in the footnote tag. In the running results, you can see a footnote containing the new link.

I hope this article will be helpful to everyone’s jQuery programming.