Content getter and setter methods

It would be nice to be able to modify the pull quote a bit by dropping some words and replacing them with ellipses to keep the content brief. To demonstrate this, we have wrapped a few words of the example text in a <span class="drop"> tag.

The easiest way to accomplish this replacement is to directly specify the new HTML entity that is to replace the old one. The .html() method is perfect for this:

$(() => { 
  $('span.pull-quote')
    .each((i, span) => {
      $(span)
        .clone()
        .addClass('pulled')
        .find('span.drop')
          .html('…')
          .end()
        .prependTo(
          $(span)
            .parent()
            .css('position', 'relative')
        );
    });
}); 

Listing 5.20

The new lines in Listing 5.20 rely on the DOM traversal techniques we learned in Chapter 2, Selecting Elements. We use .find() to search inside the pull quote for any <span class="drop"> elements, operate on them, and then...