document.write and innerhtml both the functions are useful to adding the dynamic content in in Document.

Both function are many times used by developer in javascript functions, Ajax calls, Web services and many JS libraries.

So We need understand the similarities and differences and limitation about document.write and innerhtml.

First whenever and where you calls document.write function that more important.

Here I am going to show you how to use the document.write first.

<script type="text/javascript">

var hello_world = function() {
document.write('WordPressapi is good website'); // print hello world in DOM

var mytext = "WordPressapi is best website";
document.write(mytext); // print again through variable.

}
</script>

Using above code you can print or execute the so much HTML content in DOM.

Here I am going to show you how to use the innerHTML in DOM.

<script type="text/javascript">
document.getElementById('sample_Div').innerHTML="WordPressapi is good website"; // add simple text
//document.getElementById('sample_Div').innerHTML="<img src=sample.jpg></img>"; // add image
</script>

Note: In your document “sample_Div” id with div need to be present.
put following code in your document.

<div id=\"sample_Div\">
Sample Text
</div>

Loading iframe using innerhtml is the best techniqe and solution for web services and cross domain calls.

document.getElementById('sample_Div').innerHTML = "<iframe src='http://wordpressapi.com/'></iframe>";

Both the techniques are stand for as per situation and use

There is big issue We found with innerHTML function. If you try to execute javascript in innerHTML content then we will face this problem with various.
We need to always care about Cross browser issues with javascript method.

For Ajax and adding the dynamically content in DOM we have actually we ways.
First is simple document.write function and second function is using innerHTML.

There is some cross browser issues with both the method. First I will talk about document.write.
If we use document.write in our DOM then there is no control over the content which we are adding through document.write

Basically when we use document.write then this function will execute or add the HTML content in DOM where we call this function.

If you want to avoid this this behavior I suggest use the innerHTML. But innerHTML method is also having some issues with nested innerHTML executing with 2 or 3 level with Major browsers.
Microsoft is now planning to launch the IE9 version. But in that version they are not supporting this kind of functionality.

So Major JS library developer need to think about new approach which will give some good alternate solution.

We can achieve the nested innerHTML but we need to do some very complex development in javascript.

With innerHTML method: The property is read/write for all objects except the following, for which it is read-only:
COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value. Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer
5.

In this article I am going to give example about executing the simple javascript function in innerHTML.

<br />function add_cont() {<br />var html_cont = '&lt;a href="javascript:alert(\'hello world\')"&gt;click for hello world test&lt;/a&gt;'+<br /> '&lt;script&gt; alert(\'tests\');'+<br />'var wordpressapi = document.createElement("div");'+<br />'wordpressapi.innerHTML = "some ad";&lt;\/script&gt;'<br />;<br />document.getElementById('test_htm').innerHTML = html_cont;<br />}<br /><br />&lt;div id="test_htm"&gt;&lt;/div&gt;<br />&lt;a href="javascript:add_cont()"&gt;Insert test div and text with javascript on click event.&lt;/a&gt;<br />

Other best solution is all the tradtional but still trusted.

<br />document.write("&lt;iframe src='inner_cont.html'&gt;");<br />// ... Javascript code will goes here... //<br />document.write("&lt;/iframe&gt;");<br />

I am still working on this issue to for adding nested innerHTML content.

I created javascript function named “getTheDiffTime” using that function you will be able to fetch the time difference in various format.

function getTheDiffTime(dateone, datetwo,format){
//format = "Days", Hours, Minutes, Seconds
if(dateone > datetwo) {
var seconds = dateone.getTime() - datetwo.getTime();
} else {
var seconds = datetwo.getTime() - dateone.getTime();
}
var second = 1000, minute = 60 * second, hour = 60 * minute, day = 24 * hour;
if(format=="Days"){
var rformat = Math.floor(seconds / day);
seconds -= rformat * day;
//alert("days: "+rformat);
}else if(format=="Hours"){
// find the hours
rformat = translate(seconds / hour);
//alert("hours: "+rformat);
}else if (format=="Minutes"){
//find the mintues
rformat= translate(seconds / minute);
//alert("minutes: "+ rformat);
}else if(format=="Seconds"){
//find the seconds
rformat = translate(seconds / second);
//alert("seconds: "+rformat);
}

return rformat
//alert(rformat);

}

How to use this function here I am giving you the one good example.

I am going to get the current months minutes using this function.

//for calculating the current month in mintue -script
currentMonth = new Date();
plus_oneMonth = new Date();
plus_oneMonth.setMonth(plus_oneMonth.getMonth()+1);

getTheDiffTime(plus_oneMonth,currentMonth,"Minutes");

You will get return the minutes.

Here’s a demo of a login system built using Ajax. This is a cool implementation which allows a user to login, without having to refresh the page. Here are some advantages of the noted by author of the code:

• User does not need to refresh the page to login.
• User is notified instantly on incorrect username/password combination.
• Overall user experience is more seamless.
• Password is not sent in plain text ever (more secure than traditional system).
• Javascript convenience with server-side security (uses PHP/MySQL).
• Uses one-time use random seed to hash the password before sending (making interceptions useless)

Source code for the login form is also available on the site.

Link: JamesDam.com ≈ AJAX Login System Demo

Here’s a good article on design patterns for RIA.
“Rich Internet applications (RIAs) can provide opportunities to design much better user experiences. They can be faster, more engaging and much more usable. However, this improvement is not without its downside—RIAs are much more difficult to design than the previous generation of page-based applications. The richer interaction requires a better understanding of users and of human-computer interaction (HCI). Although there is a lot of HCI material and research available, it can be difficult to determine how it applies to this new environment.”

Link: Usability for Rich Internet Applications