CODEWITHSUNDEEP
javascripthtml
tonga
tonga

Reputation: 11971

Alternative way to use JavaScript to write to a <div> element?

I want to print out a message in the page's <div> element upon page load. I have the following HTML and JavaScript code:

<body onload="printMsg()">
    <div id="write"></div>
</body>

function printMsg() {
    var node = document.getElementById("write");
    node.innerHTML = "<p>" + "Hello World!" + "</p>";
}

Here I used onload event in <body> element to call printMsg() upon page load.

But if I don't use onload event, is there any alternative way to write to <div id="write"></div> directly within the JavaScript function printMsg()?

Upvotes: 3

Views: 28973

Answers (7)

Rafael Marcos
Rafael Marcos

Reputation: 252

You can use the javascript plugin mustache JS, you render a template with a JSON notation and javascript. Minimal templating with {{mustaches}} in JavaScript. Allow you to use for a simple or complex template with a minimal code.

https://github.com/janl/mustache.js

Example of code:

// Json Data and Javascript function to calculate the value of return
var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

// The HTML Rendered with a simple example of template
var output = Mustache.render("{{title}} spends {{calc}}", view);

// Use your New HTML with native Javascript
document.getElementById("divWrite").innerHTML(output);

// Or you use your New HTML with JQuery
$("#divWrite").html(output);

Upvotes: 0

Bny
Bny

Reputation: 41

var myWeb = new Object(), _m = "model", _v = "view", _c = "controller";

myWeb.model = {

    myEle   : "log",
    myText  : "Hello World!"

}
myWeb.view = {

    doText : function() {
        document.getElementById(myWeb[_m].myEle).innerHTML = myWeb[_m].myText;
    }

}
myWeb.controller = {

    init: function() {
        if (document.readyState == "complete") {
            this.run();
        } else {
            setTimeout(myWeb[_c].init, 11);
        }
    },
    run: function() {
        myWeb[_v].doText();
    }

}
myWeb[_c].init();

Upvotes: 0

Rafael Marcos
Rafael Marcos

Reputation: 252

You can use:

window.onload  =   function() {
    var node = document.getElementById("write");
    node.innerHTML = "<p>" + "Hello World!" + "</p>";
}

or 

function printMsg() {
    newElement = document.createElement('p');
    newElement.innerHTML = "Hello world!";
    document.getElementById("write").appendChild(newElement);
}
document.body.onload = printMsg;

or 

function printMsg() {
    newElement = document.createElement('p');
    newElement.innerHTML = "Hello world!";
    document.getElementById("write").appendChild(newElement);
}
window.onload  = printMsg;

Upvotes: 2

Joey
Joey

Reputation: 1679

You can write a simple javascript function to create an element instead of manually writing each tag, which can get confusing if you do it a lot.

Also, as Matt Whipple pointed out:

make sure the script tag comes after the DOM element

HTML:

<body>
    <div id="write"></div>
    <script>printMsg()</script>
</body>

Javascript:

function printMsg() {
    newElement = document.createElement('p');
    newElement.innerHTML = "Hello world!";
    document.getElementById("write").appendChild(newElement);
}

http://jsfiddle.net/Qrsmq/7/

Upvotes: 2

Martin Turjak
Martin Turjak

Reputation: 21214

There is also .ready function, but requires using jQuery. If you are already thinking of using jquery for other things this is the way to go. It runs once the DOM is ready.

But the most straight forward option would be to call the function inline, at the end of the body:

<body>
    <div id="write"></div>
    <script>
        (function(){ 
             //do something with #write
        });
    </script>
</body>

Like the ready function it also only waits for the DOM to be loaded, it ia faster than the onload listener and it should be as back compatible with browsers ad javascript is =)

Upvotes: 1

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

as Whipple suggested you can do it as following :

   <body>
    <div id="write"></div>
    <script>
    (function printMsg() {
        var node = document.getElementById("write");
        node.innerHTML = "<p>" + "Hello World!" + "</p>";
    })();
    </script>
    </body>

DEMO

Upvotes: 7

madaaah
madaaah

Reputation: 84

You can put these function inside the declaration: $(document).ready(function() { });

You can call these in you header inside 'script', or put it in another file and call it back. All the functions inside this declaration will run with the loading of the page. The effect is the same that you onload, but don't mess with your body tag.

Upvotes: 2

Related Questions