Preprocessing AJAX HTML responses with jQuery

ajax.js

var render = function(responseHTML){
  // Turn HTML response into jQuery object.
  var $responseHTML = $(responseHTML);
  // Grab thumbnails HTML out of the envelope
  var $thumbnailVideos = $($responseHTML.find('.thumbnail-videos-envelope').html());
  // Grab backgrounds HTML out of the envelope
  var $backgroundVideos = $($responseHTML.find('.background-videos-envelope').html());
  // Now I can update the two different parts of the page from this single HTML response.
  $('#thumbnail-container').append($thumbnailVideos);
  $('body').append($backgroundVideos);
};

$.ajax({ url: "http_request_url", 
  type: 'get',
  success: function(data) {
    render(data);
  }
});

HTML_envelope_for_multiple_responses.html

<!-- Outer div and envelopes are just to separate the two distinct HTML snippets, and will be thrown away  -->
<div>
  <span class="thumbnail-videos-envelope">
    <video id="bg-3"></video>
    <video id="bg-4"></video>
  </span>
  <span class="background-videos-envelope">
    <video id="bg-3"></video>
    <video id="bg-4"></video>
  </span>  
</div>