String concatenation to build HTML fragment followed by apppend to body
<p>I am using string concatenation to build up a HTML fragment and then throw it into the DOM. I appreciate this is bad practice to be mixing HTML into your JavaScript, and there’s probably a better solution. However the line I'm struggling to code is:</p>

<pre><code>$('&lt;h1&gt;' + content[0].title + '&lt;/h1&gt;').append('body');
</code></pre>

<p>So what I want to achieve is creating a <code>&lt;h1&gt;</code> and then set the text of it to the value of the title property in the 1st object from my array of objects stored in the content variable. Then to finally append this to the <code>&lt;body&gt;</code> - any recommendations would be appreciated.</p>

<pre><code>(function() {

        var content = [
            {
                title: 'Speak of the devil and he shall appear',   
                thumbnail: 'images/bane.jpg',
            },

            {
                title: 'Me the joker',   
                thumbnail: 'images/Joker.jpg',
            }
        ];

        $('&lt;h1&gt;' + content[0].title + '&lt;/h1&gt;').append('body');

    })();
</code></pre>
