jQuery append doesn't work fully with <script> tag.

Question

Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance

snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);

destroys the layout of my page, but putting the script element in the page directly works fine.

I have posted a test case online:

• Working example with script in html.
• Broken example with script appended via jquery.

The second div should not be deleted / invisible once the silverlight object is added.

Ideas?

Answer 1

I would recommend you to use $.getScript method for loading external script files programmatically:

$.getScript('path/to/script.js', function() {
  alert('Script loaded.');
});

The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.

Answer 2

Try to use $.getScript:

$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");

Edit: The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/

Answer 3

try to break script tag like snaphtml = '<\/sc'+'ript>'

Answer 4

Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.

You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.