I am able to execute external JS file (which is used to render chemical molecules) inside jQuery. However, when the external JS file is loaded, it overwrites everything from my initial file.

How am i supposed to insert the external JS file into the appropriate DOM (in this case, the last available class with className "render") without overwriting the existing HTML file? I use an URL to get data in JSON format and parse it using .each() function as mentioned below.

1.  $(document).ready(function(){ $.get("someURL", function (json){ var obj = $.parseJSON(json); $(".container").append("<ul class =\"items\">"); $.each(obj, function(i){ name = obj[i].name; mol = obj[i].mol; script = $(document.createElement('script')).attr('type', 'text/javascript').attr('src','js/external.js'); $('ul.items').append('<li><div class="render">'); $(script).appendTo(".render:last"); }); }); });

My external js file is,

1.  transform = new ChemDoodle.TransformCanvas(name, 150, 150, true); transform.loadMolecule(ChemDoodle.readMOL(mol));