Output getElementById() JavaScript Code:
<html>
<head>
</head>
<body>
<div id='feedback'>
</div>
<script type='text/javascript'>
document.getElementById('feedback').innerHTML='Hello World!';
</script>
</body>
</html>
How this Code Work:
document.getElementById('feedback').innerHTML='Hello World!';
This code will show 'Hello World!' text to the html tag which has id feedback
As there is a <div> above which has id feedback so the text 'Hello World!' will show in that 'div'
The page is a little bigger now but it's a lot more powerful and scalable than the other two. Here we defined a division <div> and named it "feedback". That HTML has a name now, it is unique and that means we can use Javascript to find that block, and modify it. We do exactly this in the script below the division! The left part of the statement says on this web page (document) find a block we've named "feedback" ( getElementById('feedback') ), and change its HTML (innerHTML) to be 'Hello World!'. We can change the contents of 'feedback' at any time, even after the page has finished loading (which document.writeln can't do), and without annoying the user with a bunch of pop-up alert boxes (which alert can't do!). It should be mentioned that innerHTML is not a published standard. The standards provide ways to do exactly what we did in our example above. That mentioned, innerHTML is supported by every major Browser and in addition innerHTML works faster, and is easier to use and maintain. It's, therefore, not surprising that the vast majority of web pages use innerHTML over the official standards. While we used "Hello World!" as our first example, its important to note that, with the exception of <script> and <style>, you can use full-blown HTML. Which means instead of just Hello World we could do something like this…
Output getElementById() JavaScript Code in html paragraph <p> tag:
<html><head>
</head>
<body>
<div id='feedback'>
</div>
<script type='text/javascript'>
document.getElementById('feedback').innerHTML='<P><font color=red>Hello World!</font>';
</script>
</body>
</html>