?
Solved

Writing to a <a> with javascript

Posted on 2010-01-12
25
Medium Priority
?
243 Views
Last Modified: 2013-12-12
Hey There,

Just a quick question - I am trying to add a <span></span> tag to the end of my <a> tag with javascript but cannot get it working.

The current format of my unordered list is as follows:
<ul id="mainlevel-nav">
    <li class="menu-item-1"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">Menu 1</a></li>
    <li class="menu-item-2"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29">Menu 2</a></li>
    <li class="menu-item-3"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18">Menu 3</a></li>
    <li class="menu-item-4"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30">Menu 4</a></li>
    <li class="menu-item-5"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=53">Menu 5</a></li>
    <li class="menu-item-6"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=36&amp;Itemid=54">CMenu 6</a></li>
    <li class="menu-item-7"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=55">Menu 7</a></li>
    <li class="menu-item-8"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=56">Menu 8</a></li>
</ul>

Open in new window

0
Comment
Question by:George-TCC
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 6
  • +1
25 Comments
 
LVL 11

Expert Comment

by:VanHackman
ID: 26299420
Where do you want put the tag exactly?

Do you mean something like:

<li class="menu-item-1">
<a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">
<span>Menu 1</span></a></li>

Or:

<li class="menu-item-1">
<a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">
Menu 1<span></span></a></li>

?

And how  with javascript ?
In some event in particular?... When someone click a button?

If you provide more information I can help you better
0
 

Author Comment

by:George-TCC
ID: 26299450
Thanks - The second version you said is how I want it to appear like:

This would need to be done in a function that I can execute on the body onLoad tag.

Thanks,
George

<li class="menu-item-1">
<a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">
Menu 1<span></span></a></li>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 26299468
Try this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function justdoit() {
		var li = document.getElementsByTagName("li");
		for(i=0;i<li.length;i++) {
			var span = document.createElement('span');
			span.innerText = " (in the span" + i + ")";
			li[i].appendChild(span);
		}
	}
</script>
</head>
<body onload="justdoit();">
<ul id="mainlevel-nav">
    <li class="menu-item-1"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">Menu 1</a></li>
    <li class="menu-item-2"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29">Menu 2</a></li>
    <li class="menu-item-3"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18">Menu 3</a></li>
    <li class="menu-item-4"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30">Menu 4</a></li>
    <li class="menu-item-5"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=53">Menu 5</a></li>
    <li class="menu-item-6"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=36&amp;Itemid=54">CMenu 6</a></li>
    <li class="menu-item-7"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=55">Menu 7</a></li>
    <li class="menu-item-8"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=56">Menu 8</a></li>
</ul>
</body>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Assisted Solution

by:VanHackman
VanHackman earned 1000 total points
ID: 26299537

DONE!!!

Here is the code...
I put some text between the Span Tags just for show the modification, but you can erase it or put something else in it place.

I hope that my answer help you and don't forget give me some points.. ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Adding Span on Load By VanHackman</title>
</head>

<body onload="getElementByClass();">

<ul id="mainlevel-nav">
    <li class="menu-item-1"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">Menu 1</a></li>
    <li class="menu-item-2"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29">Menu 2</a></li>
    <li class="menu-item-3"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18">Menu 3</a></li>
    <li class="menu-item-4"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30">Menu 4</a></li>
    <li class="menu-item-5"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=53">Menu 5</a></li>
    <li class="menu-item-6"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=36&amp;Itemid=54">CMenu 6</a></li>
    <li class="menu-item-7"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=55">Menu 7</a></li>
    <li class="menu-item-8"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=56">Menu 8</a></li>
</ul>


</body>

 <script language="javascript">


    /* getElementByClass
    /**********************/

    var allHTMLTags = new Array();

    function getElementByClass() {
	
	var theClass = 'mainlevel-nav';
	
    //Create Array of All HTML Tags
    var allHTMLTags=document.getElementsByTagName('*');

    //Loop through all tags using a for loop
    for (i=0; i<allHTMLTags.length; i++) {
	
	
    //Get all tags with the specified class name.
    if (allHTMLTags[i].className==theClass) {

	// Adding the Span... =P
	var OriginalValue = allHTMLTags[i].innerHTML;
    allHTMLTags[i].innerHTML = OriginalValue + '<span> Done!</span>';

    }
    }
    }
	
	
</script>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26299543
@leakim971:

Sorry, but your code will insert the Span tag in the "<li>" elements no in the "<a>" how is required... ;)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 26299561
You should try it to see.
Append() add at the end of last child node of the element :
http://www.w3schools.com/DOM/met_element_appendchild.asp

The only thing I can/need add is a test for the classname if there's other li tag used.

0
 

Author Comment

by:George-TCC
ID: 26299570
Thanks for that it works although it puts the  tags outside the a tag instead of inside it.

Is there a way to put it inside the tags?

Thanks,
George
0
 
LVL 82

Expert Comment

by:leakim971
ID: 26299588
You right VanHackman, I understand you, I apologize.
Inside the <A> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
        function justdoit() {
                var li = document.getElementsByTagName("li");
                for(i=0;i<li.length;i++) {
                    if(li[i].className.match(/menu-item/g).length>0 ) {
						a = li[i].getElementsByTagName("a");
                        var span = document.createElement('span');
                        span.innerText = " (in the span" + i + ")";
                        a[0].appendChild(span);
                    }
                }
        }
</script>
</head>
<body onload="justdoit();">
<ul id="mainlevel-nav">
    <li class="menu-item-1"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">Menu 1</a></li>
    <li class="menu-item-2"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29">Menu 2</a></li>
    <li class="menu-item-3"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18">Menu 3</a></li>
    <li class="menu-item-4"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30">Menu 4</a></li>
    <li class="menu-item-5"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=53">Menu 5</a></li>
    <li class="menu-item-6"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=36&amp;Itemid=54">CMenu 6</a></li>
    <li class="menu-item-7"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=55">Menu 7</a></li>
    <li class="menu-item-8"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=56">Menu 8</a></li>
</ul>
</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26299758
0
 

Author Comment

by:George-TCC
ID: 26299884
Hey VanHackman Sorry I only saw your answer after I assigned points.

Can I get an admin to split the points 250 each?
0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26299901

@George-TCC:

Please re-assign the points, my answer was the first correct answer  so, according to the EE rules I win the points.
0
 

Author Comment

by:George-TCC
ID: 26299912
I know butI think only admins can reassign points.

If an admin sees this PLEASE SPLIT POINTS 250 EACH!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 26299954
Thanks a lot for the points!

You should have a link as "Request Attention" to alert a moderator.
0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26299964

I request to the Mods. for attention here, I hope that they fix it.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 26299992
Hello,

VanHackman, you can generalize the code so that you can use the re use the functionality.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Adding Span on Load By VanHackman - Modified</title>
  <script type="text/javascript">
	document.getElementsByClassName = function( cl , ele) 
	{
		var retnode = [];
		var myclass = new RegExp( '\\b' + cl + '\\b' );
		var elem = this.getElementsByTagName( ele );
		for ( var i = 0; i < elem.length; i++ ) {
		  var classes = elem[i].className;
		  if ( myclass.test( classes ) )
				retnode.push( elem[ i ] );
		}
		return retnode;
	};
	function addSpans(){
		var list = document.getElementsByClassName('mainlevel-nav','a');
		for(var i=0;i<list.length;i++){
			var OriginalValue = list[i].innerHTML;
			list[i].innerHTML = OriginalValue + '<span> Done!</span>';
		}
	}
	window.onload=addSpans;
</script>		
</head>
<body>
<ul id="mainlevel-nav">
    <li class="menu-item-1"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28">Menu 1</a></li>
    <li class="menu-item-2"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29">Menu 2</a></li>
    <li class="menu-item-3"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18">Menu 3</a></li>
    <li class="menu-item-4"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30">Menu 4</a></li>
    <li class="menu-item-5"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=53">Menu 5</a></li>
    <li class="menu-item-6"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=36&amp;Itemid=54">Menu 6</a></li>
    <li class="menu-item-7"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=55">Menu 7</a></li>
    <li class="menu-item-8"><a class="mainlevel-nav" href="/tcc-web/mysite/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=56">Menu 8</a></li>
</ul>
</body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:kadaba
ID: 26300015
@leakim

span.innerText = " (in the span" + i + ")"; -- This will not work in FF, IE specific

So your function can be this way.

<script type="text/javascript">
	function justdoit() {
		var li = document.getElementsByTagName("li");
		var classPattern = /menu-item/;
		for(i=0;i<li.length;i++) {
			if(classPattern.test(li[i].className)) {
				a = li[i].getElementsByTagName("a");
				var span = document.createElement('span');
				span.innerHTML = " (in the span" + i + ")";
				a[0].appendChild(span);
			}
		}
	}
</script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 26300044
Maitre kabada, je prends note, merci.
Sur IE et Chrome innerText est OK.
Néanmoins à banir donc.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 26300073
Merci.
IE - innerText
FF - textContent
Though both are not a standard.
i will improve my français :)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 26300114
@kabada
IE - innerText
FF - textContent

and both work on Chrome...
Thanks for the share! A la prochaine ;-)
0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26316082
@George-TCC:

Now, you can reassign points. Please do it.
0
 

Author Comment

by:George-TCC
ID: 26319620
Done
0
 
LVL 82

Expert Comment

by:leakim971
ID: 26319625
Thanks for the points! Happy new year!
0
 

Author Comment

by:George-TCC
ID: 26319647
No Probs! You to!
0
 
LVL 11

Expert Comment

by:VanHackman
ID: 26319763
@George-TCC: Thanks for the points.
0

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question