Manipulate Tags in .NET Using Javascript

Change the innerHTML text (or anything) when you only know the class name

When you build an application in .NET it's impossible to manually assign an ID to a HTML tag. Why? Because the server writes it's own ID's loosely based on ID's that one can set in Visual Studio. But, when the page renders all bets are off and you can't know for sure exactly what that ID is going to be. What this means is that you cannot use the popular and VERY useful document.getElementById method in Javascript to manipulate the tag's elements (I use it all the time in VBScript). With some careful planning, though, you can accomplish what you set out to do using an alternate method.

I know what you're thinking, "Why don't you use document.getElementByClassName?"

To which I reply, "because it doesn't exist."

CrAzY I know - but nevertheless still true. No matter how hard you wish it it still will not be true. But if you give your tags unique class names with very little Javascript you can quickly and easily find the particular tag with the particular class name and modify just about anything with it.

In this example I want to change the text inside of a <div> tag using innerHTML. I'm also changing the color of it not only for more effect but to also show that you can change it's color, font-size, text-align, margin, padding, etc.

The XHTML code:

The Javascript code:

function changeInnerHTML(strTag,strClass,strText) {
	for (i=0;i<document.getElementsByTagName(strTag).length; i++) {
		if (document.getElementsByTagName(strTag).item(i).className == strClass) {
			document.getElementsByTagName(strTag).item(i).style.color = "red";
			document.getElementsByTagName(strTag).item(i).innerHTML = strText;
		}
	}
}

Calling the function:
<input type="button" onclick="changeInnerHTML('div','special','You just changed the text (and color) even though you only know the class name');" value="Click to change the text within the div" />

It's really that easy. If you know enough about Javascript then you can build upon this method to manipulate other tags on your page as well. Here is a rather obtuse example just to prove it to you.

The XHTML code:

The Javascript code:

function changeALOT(strTag,strClass) {
	for (i=0;i<document.getElementsByTagName(strTag).length; i++) {
		if (document.getElementsByTagName(strTag).item(i).className == strClass){
			document.getElementsByTagName(strTag).item(i).style.color = "green";
			document.getElementsByTagName(strTag).item(i).style.backgroundColor = "pink";
			document.getElementsByTagName(strTag).item(i).style.fontWeight = "bold";
			document.getElementsByTagName(strTag).item(i).style.fontSize = "24px";
			document.getElementsByTagName(strTag).item(i).style.fontFamily = "serif";
			document.getElementsByTagName(strTag).item(i).style.textAlign = "center";
			document.getElementsByTagName(strTag).item(i).innerHTML = "Good luck with all your .NET and Javascript coding";
		}
	}
}

Calling the function:
<input type="button" onclick="changeALOT('div','extra');" value="Click to change a lot of stuff in the div tag with a class name of extra" />

a little something from Ed Knittel - tastypopsicle.com

Technorati Profile