jQuery - .append() not working
<p>I'm in the process of creating a small currency conversion script using the money.js library and have run into a problem with the .append(); part. Here is what I have so far:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function () {

    function pfxCurrencyConverter() {
        //get the users options from the form and store in variables
        var pfxFromCurrency = $('#pfx-from-currency').val();
        var pfxToCurrency = $('#pfx-to-currency').val();
        //set base options
        fx.base = pfxFromCurrency
        fx.settings = {
            from: pfxFromCurrency
        };
        //  get the amount input by the user
        var inputAmount = $('#pfx-input-amount').val();

        // Load exchange rates data via the cross-domain/AJAX proxy:
        $.getJSON('http://openexchangerates.org/latest.json', function (data) {
            // Check money.js has finished loading
            if (typeof fx !== "undefined" &amp;&amp; fx.rates) {
                fx.rates = data.rates;
                fx.base = data.base;
            } else {
                // If not, apply to fxSetup global:
                var fxSetup = {
                    rates: data.rates,
                    base: data.base
                }
            }
            var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency});

            $("#currencies").append("&lt;li&gt;New Value" + convertedValue + "&lt;/li&gt;");
        });
    } //end pfxCurrencyConverter
    $(document).ready(function () {
        pfxCurrencyConverter();
    });
&lt;/script&gt; 

&lt;/head&gt;
&lt;!-- output form for user to populate --&gt;

&lt;!-- Output the front end form, include external stylesheet and define customisable css --&gt;

&lt;/head&gt;
&lt;!-- output form for user to populate --&gt;
&lt;body&gt;
&lt;form method="get" onsubmit="return pfxCurrencyConverter();"&gt;
Amount: &lt;input type='text' id='pfx-input-amount' /&gt;&lt;br /&gt;
From: &lt;select id='pfx-from-currency'&gt;
    &lt;option&gt;Please Choose&lt;/option&gt;
    &lt;option&gt;GBP&lt;/option&gt;
&lt;/select&gt;&lt;br /&gt;
To: &lt;select id='pfx-to-currency'&gt;
    &lt;option&gt;Please Choose&lt;/option&gt;
    &lt;option&gt;USD&lt;/option&gt;
&lt;/select&gt;&lt;br /&gt;
&lt;input type='submit' value='Convert' /&gt;
&lt;/form&gt;
&lt;ul id="currencies"&gt;&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I have also this in the html right after the submit button, it works fine with just a string but stops working once I add + convertedValue</p>

<pre><code>&lt;script&gt;document.write("New Value" + convertedValue);&lt;/script&gt;
</code></pre>

<p>Any help is greatly apprecited</p>
