When working with dynamic data coming from the back end you must create the necessary DIV containers and HTML elements and append the new elements into the document body. In Fire Fox you can create a new element using the create Element method on the document object.
Adding a new element to a document is very logical. The first step is to create the node (element) you wish to append, the next is to find where you wish to append it within the document, and the final step is to actually do the appending. A node is the representation of either a piece of text or a tag and its attributes in the DOM, and will be referred to often on this tutorial. The syntax for creating a node is very simple - you just call a method of the document object.
Listing1: A simple HTML setup
Web page content is usually generated and assembled on the server side and then sent to user browser. Server side content processing allows enforcing various rules such as validation, authorization, personalization, etc. It is, however, possible to add dynamics to the content on the client side by acquiring additional or modifying existing content and re-integrating results with the page without server round trip. Below we show how this can be achieved.
To implement dynamic content on a web page, the page should include a content container HTML element, which is usually a div element. For example:
Listing2: Reflects the div element
<div id="DynamicContent"> </div>
When this HTML element is rendered by the browser, this container element does not display anything - content is empty. This is usually initial state of the container element. If more than one similar container elements are placed on a web page, each should have a unique value of the id attribute.
To populate a container element with content derived from external sources (for example report output, HTML form content, list of links, etc.), there should be an event, which executes a java script code:
Var oContent = document.getElementById(‘DynamicContent'); var cURL = 'http://www.servername.com/path/servicename.aspx' oContent.innerHTML = aaSubmitURI(cURI, "@GET", "");
In this example, the first line establishes object reference to the HTML container element which we created above, the second line provides URL of the web service which generates dynamic content to be placed into the container element, and finally the third line executes the web service, gets the content and updates the inner HTML of the container element to present the derived content.
We’ll start by first storing a newly created element in a variable. This will help us to call other functions on the element later to add styles and such. Let’s create a new div element and store it in a variable called newDiv:
Listing4: Creating a new div element and storing it in a variable.
var newDiv = document.createElement('div');
We can now refer to the newDiv element when we want to manipulate it.
The next step is to use the appendChild() method to place our newly created div into our HTML page. Since we’ve yet to add any elements to the page, we’ll need to call the body element and append our new div to it.
Here’s what it looks like in code:
Listing5: Appending the new div to the body of the page.
Listing6: Adding some style to our div element
newDiv.style.width = "500px"; newDiv.style.height = "500px"; newDiv.style.background = "#77a4d4"; newDiv.style.borderStyle = "solid"; newDiv.style.borderWidth = "1px";
As you can see, we’ve given our div some definition now, and you should be able to view the finished product in the browser in all of its glory.
The power of what we seen today is that we are creating and styling elements “on the fly”. We used the term loosely because we’re not actually doing anything dynamic here. However, there’s nothing stopping you from doing any of this within an event handler such as onClick or onMouseOver which would make creating the elements completely dynamic.