Insert HTML By jQuery Not Functioning

Question

I have looked at the multiple methods of inserting HTML with javascript, both with jQuery .prepend and .innerHTML and I keep getting the same output no matter what I do:

'); }

I am trying to insert HTML if the screen resolution if of a certain width. These are the two scripts I have tried:

<script type="text/javascript" charset="utf-8" >

if (screen.width >= 500)
{
$('#stemanimation_hype_container').prepend('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608></script>');

}
</script>

<div id="stemanimation_hype_container" style="position:relative;overflow:hidden;width:900px;height:300px;">
</div>

The other:

<script type="text/javascript" charset="utf-8" >

if (screen.width >= 500)
{
document.getElementById("stemanimation_hype_container").innerHTML='<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608'></script>";

}

</script>
<div id="stemanimation_hype_container" style="position:relative;overflow:hidden;width:900px;height:300px;">
</div>

Any idea what may be going on? I am testing this on a page with only jquery and no other scripts to ensure no conflicts. Thank you for any help you can give me!

Answer 1

you have an error in the string defining the html to insert

'<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608'></script>";

should be:

'<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608"></script>';

Answer 2

Your first block of code is missing a " after ?58608

Your second block of code has a ' where there should be a " after ?58608 , and vice-versa for the end of the string.

Try

$('#stemanimation_hype_container').prepend('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608"></script>');

Answer 3

Your original code is good, but this error:

..._script.js?58608"></script>');
                // ^ Forgot a "

Alternatively I may recommend using document.createElement and append it to the container though:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '..._script.js?58608';
document.getElementById('stemanimation_hype_container').appendChild(script);

Or, the jQuery way:

$('<script>',{
  'type' : 'text/javascript',
  'src' : '..._script.js?58608'
}).appendTo('#stemanimation_hype_container');

(Note I use ... in the code for brevity, not accuracy)

Answer 4

你试过这个：

$('#stemanimation_hype_container').html('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608"></script>');

Answer 5

如果你发布的代码是你正在尝试的实际代码，你在jq示例中有一个无与伦比的双引号，而在另一个版本中有一个double关闭一个。

Answer 6

in both examples, i see inconsistent usage of quotes in your src attributes. you started with a double quote but ended with a single quote. try ending it with a double quote.

Answer 7

You need to put the script block at the end of your HTML. Right now, you are looking for $('#stemanimation_hype_container') before that div has been inserted into the DOM, and so it doesn't exist when the JS is run. That's why nothing happens.

Answer 8

My issue in getting this to work properly was actually a nasty conflict with Tumult Hype's script for CSS3 animation. The code examples, with the exception of my typo regarding the double quotes, is actually correct for most applications.