javascript function display in a div

Question

i created a javascript and did all the coding required and finally got a variable "bookerVar" i want this variable to be displayed at the bottom of my html page . How should i do it.

(longer explanation: i created a page where a person can choose from a drop down as he chooses from the drop down using javascript i do certain calculatons and finally store the last value in a variable called bookerVar which is in a function called bookersay().

the last line of the function says return bookerVar.

now what i want is that the value stored in bookerVar can be displayed at the bootom of my html page in a div tag). can anyone tell me what do i have to write in my html code and my javascript (which is actually in a different file). Thanks.

its actually not complete and would make little sense now but i would upload it later so that in future if someone comes to this page , it could be of help — dannysood
– dannysood, Commented Jul 25, 2011 at 20:15

Phil · Accepted Answer · 2011-07-25 20:15:41Z

3

Place this in the .html doc that the bookerVar is currently located.

<script type="text/javascript">
    function addDiv() {
        var div = document.createElement('div');
        div.innerHTML = bookerVar;
        document.getElementsByTagName('body')[0].appendChild(div);
    }
    addDiv();
</script>

edited Jul 25, 2011 at 20:15

answered Jul 25, 2011 at 20:06

Phil

11.2k18 gold badges73 silver badges106 bronze badges

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

2 Comments

dannysood Over a year ago

do i also have to do anything in the div tag in the html file in which i want it to show up. ??

Phil Over a year ago

No, I depending on what bookerVar is, I would suggest surrounding it in a <p> tag or <span> tag.

user859749 · Accepted Answer · 2011-07-25 20:14:59Z

1

See if this example that i created fits you. You can copy/paste in in some .html file and run it.

<html>
<head>
<title>Appending content to some div</title>
</head>     
<body>
<div id="content"></div>
</body>
<html>

<script type="text/javascript">
function appendToContent(html) {
    var content = document.getElementById('content');
    var div = document.createElement('div');
    div.innerHTML = html;
    content.appendChild(div);
}

appendToContent('hello world');
</script>

answered Jul 25, 2011 at 20:14

user859749

4 Comments

dannysood Over a year ago

a small question my javascript is on another page and also can you please explain it using the variable bookerVer , ididnt understand the script after var div = document.createElement('div');

user859749 Over a year ago

This was just a 'generic' example. The document.createElement('div') creates a new element, that is a div, and next, it appends some html to it. If you want to append the value of your bookerVer variable, just call appendToContent(bookerVer). Of course, you might need to do some changes to adapt this code to your page.

dannysood Over a year ago

i am actually learning javascript by tutorials so i just know very little stuff. so all i have to do is replace the last line of code to appendToContent(bookerVar)?? Thank you so much for your help .

user859749 Over a year ago

Yes, but i don't know how your code is structured, you might need to do some slight changes to my code.

John Fisher · Accepted Answer · 2011-07-25 20:06:01Z

0

The easiest thing to tell you is to get JQuery, then use something like this:

$("body").append("<div>" + bookerVar + "</div>");

answered Jul 25, 2011 at 20:06

John Fisher

22.8k2 gold badges43 silver badges67 bronze badges

3 Comments

Sparkup Over a year ago

There is no mention of jquery..?

Joseph Marikle Over a year ago

actually pure DOM would be easier imo.

dannysood Over a year ago

i just know enough javascript to do what i mentioned before. I am learning javascript by using tutorials and have no idea of jquery. But still thanks.

Collectives™ on Stack Overflow

javascript function display in a div

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related