jQueryにおけるDOMツリー操作の逆挿入法の使用例の解析

   $('
Hello
').appendTo('#container'); 
 

   $('#container').append('
Hello
'); 
 

   $(document).ready(function() { 
  
 var $notes = $('
') 
  
 .insertBefore('#footer'); 
  
 $('span.footnote').each(function(index) { 
  
 $(this) 
  
 .before('' + (index + 1) + '') 
  
 .appendTo($notes) 
  
 .wrap('
'); 
  
 }); 
  
 }); 
 

插入方法回调

反向插入方法可以接受一个函数作为参数，与.attr()和.css()方法类似。 这个传入的函数会针对每个目标元素调用，返回被插入的HTML字符串。在此其 实也可以使用这个技术，但由于这样就需要对每个脚注都重复一遍相同的操作， 所以还是使用一个.each()方法来得更清晰。

现在，我们可以考虑最后一步了：在正文中相应的位置创建指向匹配脚注的链接和在脚注中 创建指向正文位置的链接。为此，每个脚注需要4处标记：两个链接，一个在正文中，一个在脚 注中；以及两个id属性。因为这样一来，传人.before()方法的参数会变得复杂，所以有必要 在这里使用一种新的创建字符串的方法。
在上面的代码中，我们使用了 操作符来拼接字符串。使用+操作符虽然没有问题，但
如果要拼接的字符串太多，那看起来就会很乱。所以，我们在这里使用数组的.join()方法来构 建一个更大的数组。换句话说，下面的两行代码结果相同。

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

   $(document).ready(function() { 
  
 var $notes = $('
') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this) 
  
 .before([ 
  
 '', index + 1, 
  
 '' 
  
 ].join('')) 
  
 .appendTo($notes) 
  
 .wrap('
'); 
  
 }); 
  
 }); 
 

注意，由于数组的每个元素会分别执行运算，因此不再需要把index+1放在括号里了。 使用这种技巧，可以为脚注标签添加一个指向页面底部的链接和一个唯一的id值。同时在后 面的方法中，也要给

   $(document).ready(function() { 
  
 var $notes = $('
') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this) 
  
 .before([ 
  
 '', 
'', index + 1, 
'' 
  
 ].join('')) 
  
 .appendTo($notes) 
  
 .wrap('
'); 
  
 }); 
  
 }); 
 

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