Assign Properties HTML tags in Javascript

[ranganathanmca]

Hi
Assign the Properties in HTML control using Java script
Example :
Html Tag : <p></p>
Java script : can i create common properties for this tag using java script,i m not mention any control id...
It's Possible for this ?

Thanks for Advance

[codeexploiter]

Yes you can do the mentioned things using JavaScript:

1. Creating an element

The "tag" actually known as an element from a web developer point of view. If you refer '<p></p>' tag you are refering 'paragraph' element. The following code will demonstrate how an element can be created at run-time using JavaScript.

	var newElement = document.createElement('p');

The above is the code that you needs to create a 'p' element. But you need to do something more to make this newly created element available in your page.

	var newElement = document.createElement('p');
	document.body.appendChild(newElement);

The second line I've added will insert the newly created 'p' element in the 'body' element of the currently loaded page at the last position. (as the last child of the 'body' element).

Now for eg: you want to put the new 'div' element inside another element whose 'ID' is "container", the following code will do the trick:

	var newElement = document.createElement('div');
	var containerElement = document.getElementById('container');
	if(typeof containerElement !== 'undefined'){
		containerElement.appendChild(newElement); //The new element will be inserted as the last child of the container element
	}

2. Setting attributes/properties of a newly created element

You can do this in three different manner:
(a) Using the setAttribute method
(b) Using the dot notation
(c) Using the square bracket notation

The test here is to assign a class name 'test' to the newly created div element and want to put the new 'div' element inside another element whose 'ID' is "container":

(a)

	var newElement = document.createElement('div');
	newElement.setAttribute('class','test');
	var containerElement = document.getElementById('container');
	if(typeof containerElement !== 'undefined'){
		containerElement.appendChild(newElement); //The new element will be inserted as the last child of the container element
	}

Please note that if you try to use setAttribute method for setting the event handlers it will create issues in IE. So it would be better if you use any one of the 2nd or 3rd notation described here.

(b) The most frequently used form is this as this is so simple to perform the job we want.

	var newElement = document.createElement('div');
	newElement.className = 'test';
	var containerElement = document.getElementById('container');
	if(typeof containerElement !== 'undefined'){
		containerElement.appendChild(newElement); //The new element will be inserted as the last child of the container element
	}

Attach an event handler to the newly created div element.

	var newElement = document.createElement('div');
	newElement.onclick = function(){
		alert('Hi its me the new one');
	}
	var containerElement = document.getElementById('container');
	if(typeof containerElement !== 'undefined'){
		containerElement.appendChild(newElement); //The new element will be inserted as the last child of the container element
	}

(c)

	var newElement = document.createElement('div');
	newElement['className'] = 'test';
	var containerElement = document.getElementById('container');
	if(typeof containerElement !== 'undefined'){
		containerElement.appendChild(newElement); //The new element will be inserted as the last child of the container element
	}

Attach an event handler to the newly created div element.

	var newElement = document.createElement('div');
	newElement['onclick'] = function(){
		alert('Hi its me the new one');
	}
	var containerElement = document.getElementById('container');
	if(typeof containerElement !== 'undefined'){
		containerElement.appendChild(newElement); //The new element will be inserted as the last child of the container element
	}

It would be better if you can refer the following links for more details

Mozilla Developer Centre

How to create

Hope this helps

[jscheuer1]

Java script : can i create common properties for this tag using java script,i m not mention any control id

No, not in any technically valid manner. All tags already have all of their technically valid properties.

You may set the value(s) of one or more of some of these properties for a given tag or set of tags globally using style, or via javascript to write out or create style. Some browsers have difficulties creating style via javascript, so it is safer to write it to the document.

If on the other hand you only want to set the value of one or more properties of a particular p tag, that can also be done. And you can go through a document and set the value of valid properties of each p tag, but if another p tag is added later, it will be unaffected. But if a property you wish to set is one that is unaffected by css style, this is the best you can do.

If you want to access just one p tag and it has no id, you must find another way of accessing it. Perhaps you know which p tag it is numerically in the flow of the document. Then you could use document.getElementsByTagName('p')[n], where n is its number in the document.