?
Solved

Writing to a <a> with javascript

Posted on 2010-01-12
25
Medium Priority
?
250 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
  • 8
  • 7
  • 6
  • +1
24 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 83

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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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 83

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 83

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 83

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 83

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 83

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 83

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

594 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