CODEWITHSUNDEEP
javascriptjqueryhtml
Benjamin Morrison
Benjamin Morrison

Reputation: 791

Insert HTML By jQuery Not Functioning

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!

Upvotes: 2

Views: 295

Answers (8)

Benjamin Morrison
Benjamin Morrison

Reputation: 791

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.

Upvotes: 0

andi
andi

Reputation: 6522

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.

Upvotes: 0

Karel Bertin Jr
Karel Bertin Jr

Reputation: 21

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.

Upvotes: 0

Brian
Brian

Reputation: 1894

Have you tried this:

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

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101604

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)

Upvotes: 1

Brian Warshaw
Brian Warshaw

Reputation: 22984

If the code you posted is the actual code you're trying, you've got an unmatched double quote in the jq example, and a double closing a single in the other version.

Upvotes: 0

jackwanders
jackwanders

Reputation: 16020

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>');

Upvotes: 1

Jarry
Jarry

Reputation: 1931

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>';

Upvotes: 6

Related Questions