Results 1 to 3 of 3

Thread: Assign Properties HTML tags in Javascript

  1. #1
    Join Date
    Jan 2009
    Location
    Bangalore
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Assign Properties HTML tags in Javascript

    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

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

    Code:
    	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.

    Code:
    	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:

    Code:
    	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)
    Code:
    	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.
    Code:
    	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.
    Code:
    	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)
    Code:
    	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.
    Code:
    	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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ranganathanmca View Post
    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.
    Last edited by jscheuer1; 01-09-2009 at 02:13 PM. Reason: add access info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •