Why won't this JQuery inner html set work?

Question

I've been trying to get this taken care of, and it doesn't seem to want to work. I've scoured the internet and stackoverflow for an answer, but I can't seem to find anything that actually works for this. If anyone can help me out here, that would be awesome!

<html>
    <head>
        <script rel="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

        $(document).ready(function(){
            $(".box").html("sing!!!!");
        });
        </script>

        <style>
            .box{
            border:2px solid black;
            padding:12px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            This will be replaced with a JQuery statement.
        </div>
        <p>
            This is text to be left UNALTERED.
        </p>
    </body>
</html>

It's probably because you are loading the jquery library and declaring script statements in a single tag. See http://stackoverflow.com/questions/6528325/what-does-a-script-tag-with-src-and-content-mean — Tim M., Mar 09 '13 at 18:02
Side note: `script` tags have no `rel` attribute, and the `type` attribute defaults to `text/javascript` universally, so you should leave `rel` off entirely, and you *can* leave `type` off if you like (if you're using JavaScript). — T.J. Crowder, Mar 09 '13 at 18:10

score 4 · Accepted Answer · answered Mar 09 '13 at 18:02

4

The script tag for jquery is not closed.

 <script rel="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 <script>
        $(document).ready(function(){
            $(".box").html("sing!!!!");
        });
 </script>

answered Mar 09 '13 at 18:02

Kevin Bowersox

93,289
19
159
189

Okay, so that's a separate script tag set within the head? Okay, I guess that makes sense. Thanks! – Articulous Mar 09 '13 at 22:32

T.J. Crowder · Answer 2 · 2013-03-09T18:18:28.567

A script tag can either have a src attribute to load an external file, or inline content, but never both. If you give it both, the inline content is ignored (on most browsers).

So your script tag:

<script rel="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

$(document).ready(function(){
    $(".box").html("sing!!!!");
});
</script>

...is invalid. You need to end the one loading jQuery, and then open a new one for your code:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").html("sing!!!!");
});
</script>

(See my comment on the question for why I've removed rel and type from that.)

Why won't this JQuery inner html set work?

2 Answers2