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!

why are you adding charset="utf-8". I don't think you need that. — C0D3
– C0D3, Commented Sep 7, 2012 at 18:19
I'm using Hype to build animations, thats what it told me to do,but even without, it makes no difference — Benjamin Morrison
– Benjamin Morrison, Commented Sep 7, 2012 at 18:20

Jarry · Accepted Answer · 2012-09-07 18:20:26Z

6

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

answered Sep 7, 2012 at 18:20

Jarry

1,9063 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jackwanders · Accepted Answer · 2012-09-07 18:21:29Z

1

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

answered Sep 7, 2012 at 18:21

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

1 Comment

Benjamin Morrison Over a year ago

dbaseman's example give me no brackets but no animation, jackwanders' give me brackets again.

Brad Christie · Accepted Answer · 2012-09-07 18:24:01Z

1

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)

answered Sep 7, 2012 at 18:24

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

1 Comment

Brad Christie Over a year ago

@BenjaminMorrison: Not sure what the issue is. Given this is hand-written script, the premise of attachment is the same: jsfiddle.net/BVJTK/1

Brian Warshaw · Accepted Answer · 2012-09-07 18:22:37Z

0

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.

answered Sep 7, 2012 at 18:22

Brian Warshaw

23k9 gold badges55 silver badges72 bronze badges

5 Comments

Brian Warshaw Over a year ago

What is your expected result? Since you're injecting a script, what do you hope to have happen?

Benjamin Morrison Over a year ago

I used a program called hype to create javascript/html/css3 animations. It works BEAUTIFULLY, but I just can't seem to get this to work conditionally with screen resolution. The site is responsive and I need to have different animations called/inserted depending on screen resolution.

Benjamin Morrison Over a year ago

If I upload it to my server would you guys mind taking a look yourself?

Benjamin Morrison Over a year ago

brmceramics.com/tiesrev/testing/STEM%20Animation.html

Benjamin Morrison Over a year ago

the one that works with the recommended code is here: brmceramics.com/tiesrev/testing/STEM%20Animationworking.html

Brian · Accepted Answer · 2012-09-07 18:27:39Z

0

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

edited Sep 7, 2012 at 18:27

answered Sep 7, 2012 at 18:20

Brian

1,8931 gold badge23 silver badges38 bronze badges

Comments

Karel Bertin Jr · Accepted Answer · 2012-09-07 18:31:10Z

0

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.

answered Sep 7, 2012 at 18:31

Karel Bertin Jr

215 bronze badges

4 Comments

Benjamin Morrison Over a year ago

I fixed the quotes, no dice. If anyone wants to take a look it's at this address: brmceramics.com/tiesrev/testing/STEM%20Animation.html

Benjamin Morrison Over a year ago

Oh and FYI, I know jack squat about javascript.

Brian Over a year ago

I'm getting the following HTML:'); } Looks like an issue with the js file.

Benjamin Morrison Over a year ago

I didn't know that could be an issue. I thought that by calling the file by HTML, it wouldn't clash. I asked the Tumult forums but so far no bites

andi · Accepted Answer · 2012-09-07 20:21:05Z

0

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.

answered Sep 7, 2012 at 20:21

andi

6,5421 gold badge20 silver badges43 bronze badges

Comments

Benjamin Morrison · Accepted Answer · 2013-02-01 02:01:50Z

0

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.

answered Feb 1, 2013 at 2:01

Benjamin Morrison

7832 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Insert HTML By jQuery Not Functioning

8 Answers 8

Comments

1 Comment

1 Comment

5 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

1 Comment

5 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related