title: How to prevent duplicate code when implementing progressive enhancement?
body: <p>I'm running a PHP webapp that allows users to view lists of item.</p>
  
  <p>The bare-boned site uses PHP to write the HTML to show the search results:</p>
  
  <pre><code>&lt;body&gt;
     &lt;?php
        foreach($results as $item) {
           echo "&lt;div class='item'&gt;".
                   "&lt;img src='images/items/".$item['imageName'].".png' /&gt;".
                   "&lt;span class='itemDescription'&gt;".$item['text']."&lt;/span&gt;".
                "&lt;/div&gt;";
        }
      ?&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>However, when Javascript is enabled, I use AJAX to display results:</p>
  
  <pre><code>function fireSearch(query) {
     $.post("ajax/search.php", {q: query}, function(items) {
        for (var i in items) {
           $("body").append(
               "&lt;div class='item'&gt;"+
                  "&lt;img src='images/items/"+items[i]['imageName']+".png' /&gt;"+
                  "&lt;span class='itemDescription'&gt;"+items[i]['text']+"&lt;/span&gt;"+
               "&lt;/div&gt;";
        }
     }
  }
  </code></pre>
  
  <p>I could simply write a PHP function called <code>get_item_html($item)</code> and make the AJAX request return the clean HTML and simply place it in the DOM, but if the request returns lots of results that would be a real waste of bandwidth when all I really need to construct the HTML is the <code>imageName</code> and the <code>text</code>.</p>
  
  <p>Is this just something I have to cope with or is there some elegant solution?</p>
  
  <p>And does this problem have a name so I can google it?</p>