Place content in JavaScript (HTML files)

Question

Hi,

How to place content (example: simple text) in JavaScript?

I need it to be like youtube, where the video is only visible on JavaScript enabled browser.

Thanks.

Answer 1

Using the noscript tag, like this:

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>

You might also want to consider putting the script in some sort of HTML comment so that browsers that don't even know about script don't render the source code, e.g.:

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

Answer 2

Read about graceful degradation, while you're at it: http://www.google.com/search?q=javascript+graceful+degradation

Answer 3

You need to append a new DOM node to the DOM (Document Object Model).

The simplest one would be this:

var myNewNode = document.createTextNode('abc');

As for all more advanced nodes, you can create them as follows:

var myNewNode = document.createElement('div');
myNewNode.className = 'cssClass';
myNewNode.innerHTML = 'abc';

Something that's a little neater than setting "innerHTML", however, especially if you're adding complex content, and want to hook up events to it etc, is to add children to that node:

var myNewNode = document.createElement('div');

var myChildNode = document.createElement('input');
myChildNode.type = 'button';
myChildNode.value = 'Click me';

myNewNode.appendChild(myChildNode);

Assuming, then, that you've created myNewNode in any of the ways described above, you just need to locate the place in your document where you want to add the new node, and insert it:

document.body.appendChild(myNewNode);

or

document.getElementById('container').appendChild(myNewNode);