JQuery: Build HTML in ‘memory’ rather than DOM

by

When dealing with more complex nodes (especially heavily nested ones), it is a better approach to write the node in HTML and set its visibility hidden.

You can then use JQuery’s clone() method to make a copy of the node and adapt its contents to your needs.

E.g. with this html:

<div class="template-node" style="display:none;">
   <h2>Template Headline</h2>
   <p class="summary">Summary goes here</p>
   <a href="#" class="storylink">View full story</a>
</div>

it’s much faster and understandable to do:

var $clone = $('.template-node').clone();
$clone.find('h2').text('My new headline');
$clone.find('p').text('My article summary');
$clone.find('a').attr('href','article_page.html');
$('#destination').append($clone);

than to create the entire node in memory like shown above.

More Related Contents:

  1. How to Use slideDown (or show) function on a table row?
  2. Calling a ‘WebMethod’ with jQuery in ASP.NET WebForms
  3. jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
  4. jQuery onclick toggle class name
  5. Jquery datepicker restrict dates in second date field based on selected date in first date field
  6. jQuery .attr(“disabled”, “disabled”) not working in Chrome
  7. Fading in a background image
  8. current/duration time of html5 video?
  9. How to bind to localStorage change event using jQuery for all browsers?
  10. Resize SubGrid Columns on resizing main grid
  11. How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
  12. How to find the highest z-index using jQuery
  13. Selecting only first-level elements in jquery
  14. How to get Interdependent dropdowns in django using Modelform and jquery?
  15. get html of external url in jquery
  16. First word selector
  17. Triggering jquery with css media queries
  18. How do I duplicate item when using jquery sortable?
  19. jQuery: read text file from file system
  20. jQuery: dealing with a space in the id attribute
  21. Return a value when using jQuery.each()?
  22. Disable scrolling when changing focus form elements ipad web app
  23. jquery ui tabs no longer supporting cookie? now what?
  24. Get mouse position on scroll
  25. Clear text area
  26. Fading elements in and out without changing the layout of the page
  27. jQuery web page height
  28. Unselect what was selected in an input with .select()
  29. Working with single page websites and maintaining state using a URL hash and jQuery
  30. jQuery Deferred – getting result of chained ajax calls

Leave a Comment