Unable to change content inside div tag

Question

I was creating this very basic program using JQuery but somehow it's not working. I spent 20 mins on it but couldn't figure it out. Don't know what I am missing in it. The code is like this:

<head>
    <script>
        $('#error').html('<p>There are 4 horses.</p>');
                            or
        alert($('#error').html());
    </script>
</head>
<body>
    <div id="container">
        <div id="error">
            <h2>hello</h2>
        </div>
    </div>
</body>

can you guide me where I am wrong.

It works http://jsfiddle.net/omor6L0m/1/ .... are you including Jquery ? . Any console error? — DaniP, Feb 13 '15 at 17:09
Please explain a bit clearer what you are trying to do as this can be interpreted differently. Are you trying to replace the word hello or are you trying to add the
tag after it? why do you have the random uncommented `or` statement in your JavaScript? did you mean to comment it? — KHeaney, Feb 13 '15 at 17:13
@DanielPinzon there was no error. I wasn't using the document.ready(function()) and forgot to use the — Munish Gupta, Feb 13 '15 at 17:25
@Arkantos: there was no error, I forgot to put the event and the script tag in it. — Munish Gupta, Feb 13 '15 at 17:27
@KHeaney: or means that that the other option was also not working and yes I was trying to replace the hello with — Munish Gupta, Feb 13 '15 at 17:28
@MunishGupta I just suppose that you have included jquery ... on JSFiddle at the left side you can see "Frameworks & Extensions" where you can select Jquery and any version that selection includes the script source. — DaniP, Feb 13 '15 at 17:31
@DanielPinzon: yup. you are right and it's a great tool to use. Thanks for all you r help.. — Munish Gupta, Feb 13 '15 at 17:41

score 1 · Answer 1 · answered Feb 13 '15 at 17:09

1

Put the code

$('#error').html('<p>There are 4 horses.</p>');

inside of

$(document).ready( function() {

});

HTML

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript'>
//<![CDATA[ 
$(document).ready( function() {
 $('#error').html('<p>There are 4 horses.</p>');
 alert($('#error').html());
});
//]]>  
</script>
</head>
<body>
  <div id="container">
    <div id="error">
         <h2>hello</h2>
    </div>
</div>
</body>
</html>

answered Feb 13 '15 at 17:09

Lumi Lu

3,289
1
11
21

it worked.. I didn't put the other – Munish Gupta Feb 13 '15 at 17:17
i thought it will work without the jquery src, but i guess I was wrong. Thanks a lot... – Munish Gupta Feb 13 '15 at 17:19
1

@MunishGupta Jquery is a library so everytime you want to use some of their functions and codes you need to include it. – DaniP Feb 13 '15 at 17:22

score 1 · Accepted Answer · edited May 23 '17 at 12:30

You have to use document.ready which is an event which fires up when document is ready.

$(document).ready( function() {
     $('#error').html('<p>There are 4 horses.</p>');
});

What is document.ready?

document.ready is not needed for anything else than manipulating the DOM accurately. What I mean is that when you develop a large jQuery plugin for example you hardly use it throughout the code because you're trying to keep it dry, so you abstract as much as possible in methods that manipulate the DOM but are meant to be invoked later on. When all your code is tightly integrated the only method exposed in document.ready is usually init where all the DOM magic happens.

Want to know more about document.ready? check this:When should I use jQuery's document.ready function?

score 0 · Answer 3 · answered Feb 13 '15 at 17:10

0

You need to call the function on page load:

$(function() {
$('#error').html('<p>There are 4 horses.</p>');
});

JSFiddle Demo

answered Feb 13 '15 at 17:10

Jacob G

13,762
3
47
67

You need to post more of your coding, if you want to get quality answers @MunishGupta – Jacob G Feb 13 '15 at 17:15
got it.. first i didn't put the document.ready(function()) and second i didn't used the script src code. I didn't use them for a reason but i guess i was wrong, no matter i have to use them both. and thanks for your help.. – Munish Gupta Feb 13 '15 at 17:23

Unable to change content inside div tag

3 Answers3

What is document.ready?