<p>I'm calling a web service that returns an array of objects in JSON.  I want to take those objects and populate a div with HTML.  Let's say each object contains a url and a name.</p>

<p>If I wanted to generate the following HTML for each object:</p>

<pre><code>&lt;div&gt;&lt;img src="the url" /&gt;the name&lt;/div&gt;
</code></pre>

<p>Is there a best practice for this? I can see a few ways of doing it:</p>

<ol>
<li>Concatenate strings</li>
<li>Create elements</li>
<li>Use a templating plugin</li>
<li>Generate the html on the server, then serve up via JSON.</li>
</ol>

Either of the first two options is both common and acceptable.
I'll give examples of each one in
Prototype
.
```
```
// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }
```
```
Approach #1:
```
```
var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom
```
```
Approach #2:
```
```
var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom
```
```