Adding content to a div from javascript

Question

I would like to load a script that contains the content of a div on my html page. I know this is possible, but I am struggling to understand how to do it. Here is my html:

<html>
<body>
<script src="script.js"> </script>
<div id="helloWorld"> </div>
</body>
</html>

What would script.js have to be for the html page to display something? I was thinking something like this (I know it's incorrect, I'm a beginner at javascript.

function showText()
{
    $("#helloWorld").html("<p> Hello World! </p>")
    $("#helloWorld").show();

}
showText()

Can someone tell me whether or not I'm on the right track, and how I could fix this? Thanks, Sam

Seems fine although you don't need the line ending .show(). Have you reference jQuery? — Dave Hogan
– Dave Hogan, Commented Aug 16, 2012 at 14:48
I've read quite a bit, I'm not sure why I cannot get this working :S — Sam Creamer
– Sam Creamer, Commented Aug 16, 2012 at 14:49

Oriol · Accepted Answer · 2012-08-16 14:55:56Z

3

Your code is jQuery:

$("#helloWorld").html("<p> Hello World! </p>")
$("#helloWorld").show();

and you don't need $("#helloWorld").show();.

In plain JavaScript,

function showText()
{
    document.getElementById("helloWorld").innerHTML="<p> Hello World! </p>";
}
showText()

But remember to call showText() after the loading of the div in the DOM! (For example, call it just before </body> tag).

Then,

<html>
<head>
...
<script type="text/javascript" src="script.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
showText();
</script>
</body>
</html>

And script.js:

function showText(){
    document.getElementById("helloWorld").innerHTML="<p> Hello World! </p>";
}

edited Aug 16, 2012 at 14:55

answered Aug 16, 2012 at 14:50

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

Comments

gabtub · Accepted Answer · 2012-08-16 14:51:53Z

1

I think it does nothing (I assume) becaue your script tag is before the div itself. If you're using JQuery, you should put your initial code into the ready function, in your case:

$(document).ready(function(){
  showText();
});

answered Aug 16, 2012 at 14:51

gabtub

1,4702 gold badges18 silver badges22 bronze badges

Comments

h2ooooooo · Accepted Answer · 2012-08-16 14:52:12Z

1

When your script loads, the HTML element "#helloWorld" still doesn't exist.

Use $(document).ready like this:

function showText() {
    $("#helloWorld").html("<p> Hello World! </p>")
    $("#helloWorld").show();
}
$(document).ready(function() {
    showText();
});

answered Aug 16, 2012 at 14:52

h2ooooooo

39.6k8 gold badges70 silver badges107 bronze badges

1 Comment

Sam Creamer Over a year ago

thanks, will try this! And thanks to all the other answers as well

Rudolf Lamprecht · Accepted Answer · 2012-08-17 11:48:19Z

0

the syntax you are trying to use requires JQuery. You can download the latest JQuery library here http://jquery.com/

Then you can use the following in order to add text to your div:

$(document).ready(function(){
  var showText = function(){
    $("#helloWorld").html("<p> Hello World! </p>")  
    $("#helloWorld").show();
  };    
  showText();
});

Edited: I have added in the $ character at the start of (document), also, it is not necessary to have the .show() function on your div as it is already visible. If you do however set that div's display to none, you should use .show() to display the div.

edited Aug 17, 2012 at 11:48

answered Aug 16, 2012 at 14:53

Rudolf Lamprecht

1,0802 gold badges14 silver badges43 bronze badges

2 Comments

h2ooooooo Over a year ago

You forgot a $ before (document). I would add it, but I can't as I need to change 6 characters.

Rudolf Lamprecht Over a year ago

Apologies, h2oooo is correct. Ensure to add the $ in front of your (document) to instantiate the use of jquery

Collectives™ on Stack Overflow

Adding content to a div from javascript

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related