Javascript how to make sure JQuery .append is displayed
<p>I have the following javascript function, which uses <code>.append</code> from JQuery. However it only works if I add <code>alert()</code> at the beginning of the function. I have found out the reason for this behavior is due to the asynchronous way AJAX works.  </p>

<p>How can I make sure that this function displays the html as wanted?</p>

<pre><code>this.printJSON = function(id) {
    //alert(id);
    $(id).append('&lt;button id="#store"&gt;store&lt;/button&gt;');
    for(key in params) {
          $(id).append('&lt;p '...'&lt;/p&gt;');
    }
};
</code></pre>

<p>my whole class, which is called this way:</p>

<pre><code>params.parseJSON();
params.printJSON("#showdata");

function Parameters(parametersFile) {
    //private stuff
    var paramFile = parametersFile;
    var params = {};

    //public stuff
    this.parseJSON = function() {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        for(var param in json) {
            for(var key in json[param]) {
                if(json[param].hasOwnProperty(key)) {
                    params[key] = {
                    filterIdentifier : json[param][key].filterIdentifier,
                    paramIdentifier : json[param][key].paramIdentifier,
                    param : json[param][key].param
                        };
                    }
                 }

          }
       });
    };

    this.printJSON = function(id) {
            alert("");
        $(id).append('&lt;button id="#store"&gt;store&lt;/button&gt;');
        for(key in params) {
                $(id).append('&lt;p id="' + key + '"&gt; filterIdentifier: ' + params[key].filterIdentifier + '&lt;br /&gt; paramIdentifier: ' + params[key].paramIdentifier + '&lt;br /&gt; param= &lt;input type="text" id="' + key + '"name="param" value="' + params[key].param + '"/&gt;&lt;/p&gt;');

                        //alert(params[key].filterIdentifier);
        }
    };
</code></pre>

<p>}</p>
