innerHTML with Classes

**alexjewell** · 06-10-2010, 11:06 PM

I have to change the innerHTML of a span with a class rather than an id. The reason I can't attach an id to it is it's part of code automatically generated by Joomla. Thus, I do not have direct access to it.

I wrote a quick script to do this, using an onload function on <body>. Here's the code:

Code:

function changeRecBlogTitle(){
	var spans = getElementsByTagName("span");
	for (i = 0; i < spans.length; i++){
		if spans[i].className = "separator"{
			inner = spans[i].innerHTML;
			if(inner == "Blog"){
				spans[i].innerHTML = "Recent Blogs";
			}
		}
	}
}

And, I call it:

HTML Code:

<body onload="changeRecBlogTitle();">

Finally, here is the <span>:

HTML Code:

<span class="separator">Blog</span>

I simple want to change "Blog" to "Recent Blogs." Any idea what I'm doing wrong?

**azoomer** · 06-10-2010, 11:55 PM

Hi regular javascript is to complicated for me but if you have jquery on your page already something like this might work

Code:

<script type="text/javascript">
$(document).ready(function(){ 
var el = $('.separator');
el.html(el.html().replace(/Blog/ig, "Recent blogs"));
});
</script>

**alexjewell** · 06-11-2010, 12:07 AM

I believe mootools already comes with Joomla, and do not want to run into conflicts between mootools and jquery by adding jquery now. Do you know how to write the same code in mootools, or does anyone else know how to simply write it out in plain javascript? Thanks.

**molendijk** · 06-11-2010, 11:17 PM

Code:

function changeRecBlogTitle(){
	var spans = document.getElementsByTagName("span");
	for (i = 0; i < spans.length; i++){
		if (spans[i].className == "separator"){
			spans[i].innerHTML = "separator"}
			else spans[i].innerHTML = "non-separator";
		}
	}

Arie Molendijk

Thread: innerHTML with Classes

Thread Tools

Search Thread

innerHTML with Classes

Bookmarks

Bookmarks

Posting Permissions