Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Adding a new link to a DIV using Greasemonkey / JavaScript...

Posted on 2010-09-12
11
Medium Priority
?
738 Views
Last Modified: 2012-05-10
I need to add a new link to a toolbar on a webpage dynamically using JavaScript/Greasemonkey.  The View Page Source code for the existing web page is included in the code snippet below.

Keep in mind that I do not have access to the web page on the server .. that this will be a Greasemonkey script that processes the page with Javascript after the page loads.  Suggestions?
<div id="toolbar"><a href="/game/home.pl" class="toolbar_item">Home</a>

<a href="/game/leagues.pl" class="toolbar_item">Leagues</a>
<a href="/game/search.pl" class="toolbar_item">Search</a>
<a href="/game/hof.pl" class="toolbar_item">HoF</a>
<a href="/game/market_free_agents.pl" class="toolbar_item">Marketplace</a>
<a href="/game/forum_main.pl" class="toolbar_item">Forum</a>
<a href="/game/inbox.pl" class="toolbar_item">Inbox<span id="messageCount"> (?|?)</span></a>
<a href="/game/chat.pl" class="toolbar_item">Chat</a>
<a href="/game/flex_points.pl" class="toolbar_item">Flex Points</a>

<a href="/guides.html" class="toolbar_item">FAQ/Guides</a>
<a href="http://www.glbwiki.com" class="toolbar_item" target="_new">Wiki</a>
<a href="http://www.blogtalkradio.com/goalline-blitz-radio" class="toolbar_item" target="_new">GLB Radio</a>
<a href="http://www.cafepress.com/goallineblitz" class="toolbar_item" target="_new">Shop</a>
<a href="/game/support.pl" class="toolbar_item">Support</a>
<a href="/game/logout.pl" class="toolbar_item" id="logout">Log Out</a>
</div>

Open in new window

0
Comment
Question by:ErDrRon
[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
  • 6
  • 5
11 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 33660540

window.onload = function(){
   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
   document.getElementById('toolbar').appendChild(myElement); 
} 

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33660546
greasemonkey:
(function(){
   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
   document.getElementById('toolbar').appendChild(myElement); 
})();

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33663712
Thank you for the response!

When I run the following script on the following page, http://goallineblitz.com/game/home.pl , I do not see the addition of a new Google tab in the toolbar.  I've included the code I used below.  Thoughts?

Thanks!

// ==UserScript==
// @name           Testing
// @namespace      ErDrRon
// @description    Testing
// @include        http://goallineblitz.com/game/home.pl
// ==/UserScript==

(function(){
   var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
   document.getElementById('toolbar').appendChild(myElement); 
})();

Open in new window

0
Independent Software Vendors: 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 14

Expert Comment

by:sam2912
ID: 33664662
open Firefox's Error Console under Tools menu, click clear, reload the page, and tell me what is the error message.
0
 

Author Comment

by:ErDrRon
ID: 33665846
Error: String contains an invalid character
Source File: file:///C:/Users/Ron/AppData/Roaming/Mozilla/Firefox/Profiles/72gmph1h.default/gm_scripts/testing/testing.user.js
Line: 9
0
 
LVL 14

Expert Comment

by:sam2912
ID: 33665872
That's weird. Anyway, try removing the function tag. It is not necessary for GM scripts. If there are any more errors also let me know.
// ==UserScript==
// @name           Testing
// @namespace      ErDrRon
// @description    Testing
// @include        http://goallineblitz.com/game/home.pl
// ==/UserScript==

var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
document.getElementById('toolbar').appendChild(myElement);

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33667865
I made the changes as outlined above and still receive the following error:

Error: String contains an invalid character
Source File: file:///C:/Users/Ron/AppData/Roaming/Mozilla/Firefox/Profiles/72gmph1h.default/gm_scripts/testing/testing.user.js
Line: 8

The script is as below:

// ==UserScript==
// @name           Testing
// @namespace      ErDrRon
// @description    Testing
// @include        http://goallineblitz.com/game/home.pl
// ==/UserScript==

var myElement = document.createElement('<a href="http://www.google.com">Google</a>');
document.getElementById('toolbar').appendChild(myElement);

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33668774

try {
	var myDiv = document.createElement("div");
	myDiv.innerHTML = '<a href="http://www.google.com">Google</a>';
	document.getElementById('toolbar').appendChild(myDiv);
} catch(e) {}

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33670382
I tried the above code.  I did not receive an error in the Error Console but also did not see the added tab on the page.  No changes were noted on the page after refreshing.  Thoughts?
0
 
LVL 14

Accepted Solution

by:
sam2912 earned 2000 total points
ID: 33670986
Happens that their nav bar is using styles, so just add the class to the link:
var myDiv = document.createElement("div");
myDiv.innerHTML = '<a class="toolbar_item" href="http://www.google.com">Google</a>';
document.getElementById('toolbar').appendChild(myDiv);

Open in new window

0
 

Author Comment

by:ErDrRon
ID: 33677461
Works a treat!  Thank you!
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

722 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