Log in

View Full Version : 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:



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:



<body onload="changeRecBlogTitle();">


Finally, here is the <span>:



<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

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