...

View Full Version : How to show any sort of data with only including a Javascript file.



gr8pro
05-20-2012, 01:54 PM
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.

VIPStephan
05-20-2012, 02:37 PM
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:


<!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.

gr8pro
05-21-2012, 12:11 PM
Ok, that's understood. But how to do this type of work??



<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.

VIPStephan
05-21-2012, 01:36 PM
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:


<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:


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:


<!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>

gr8pro
05-31-2012, 08:49 AM
And what about addind HTML to "Look mam, I've ....." ??? How can you add html in it??????

felgall
05-31-2012, 09:10 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum