Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    India
    Posts
    29
    Thanks
    2
    Thanked 1 Time in 1 Post

    Exclamation How to show any sort of data with only including a Javascript file.

    Hello All, I always wonder that how to display any sort of data or HTML codes by just simply calling or including a Javascript file in other HTML file or a webpage.

    If you didn't understand what I want to say, I would like to give an example like AdSense gives a javascript code that need to be put where we want to show ads. And the ads appear, similarly how to display any HTML code with just inclusion of Javascript file.

    An other example is -

    <script type="text/javascript" src="http://example.com/scripts/javascript/source/somescript.js">
    <div id="div_one"></div>
    <div id="div_two"></div>
    <div id="div_three"></div>
    </script>

    Now this script will show some HTML inside first div, some on second and so on. So How can I do that, please explain with an example...

    Thanks.
    UmarWebTechs.com - That's all about Web Development and it's tips, tricks and techniques.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    With JavaScript you can create and manipulate DOM nodes dynamically. That means you can create HTML elements and insert them into the existing HTML without actually editing the HTML document. This is what AdSense and all these scripts do. And they make it even easier as they have prepared a regular HTML document and the JavaScript is just inserting an inline frame (<iframe>) where they display the content. The same is done with all these Facebook and Twitter buttons, by the way.

    Simple example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    …
    </head>
    <body>
    <div>The text below has been created dynamically.</div>
    <script type="text/javascript">
      // create a new div element
      var newDiv = document.createElement("div");
      // and give it some content
      var newContent = document.createTextNode("Look, ma, I’ve been created by JavaScript");
      newDiv.appendChild(newContent); //add the text node to the newly created div.
      // add the newly created element and it's content into the DOM
      var docBody = document.getElementsByTagName("body")[0];
      docBody.appendChild(newDiv);
    </script>
    </body>
    </html>
    You could put the script into a separate JS file and include it there, it would do the same.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    India
    Posts
    29
    Thanks
    2
    Thanked 1 Time in 1 Post
    Ok, that's understood. But how to do this type of work??

    Code:
    <script type="text/javascript">
    <div id="somediv"></div>
    <div id="anotherdiv"></div>
    </script>
    As you can see there's no content inside these two divs. But by Javascript, how we can put the content in each specified div dynamically ???? Please Help, Thanks.
    UmarWebTechs.com - That's all about Web Development and it's tips, tricks and techniques.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    I just showed you above how content is added dynamically. But I doubt that the setup is as you are showing it. I’ve never seen someone put HTML inside a script element. Facebook, for example, requires an element with the ID “fb-root” to which the content is added, but this element is not in between script tags, it’s somewhere else in the body, usually set up like this:
    Code:
    <div id="fb-root"></div>
    <script type="text/javascript" src="(facebook script source here)"></script>
    My code above could also be modified accordingly. Change the JS to this:
    PHP Code:
    var newDiv document.createElement("div");
    var 
    newContent document.createTextNode("Look, ma, I’ve been created by JavaScript");
    newDiv.appendChild(newContent);
    var 
    el document.getElementById("empty");
    el.appendChild(newDiv); 
    put that script into a separate JS file called “functions.js” and include it in the HTML like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    …
    </head>
    <body>
    <div>The text below has been created dynamically.</div>
    <div id="empty"></div>
    <script type="text/javascript" src="functions.js"></script>
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    India
    Posts
    29
    Thanks
    2
    Thanked 1 Time in 1 Post
    And what about addind HTML to "Look mam, I've ....." ??? How can you add html in it??????
    UmarWebTechs.com - That's all about Web Development and it's tips, tricks and techniques.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by gr8pro View Post
    And what about addind HTML to "Look mam, I've ....." ??? How can you add html in it??????
    By using JavaScript DOM commands to create the HTML - as in the example already provided.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •