Greasemonkey: Add a link in a table

Question

I want to modify an HTML page which looks something like this:

<html><head><title>Test</title></head>
<body bgcolor=white link=black alink=black vlink=black text=black>
<table cellpadding=0 ><tr><td class=tiny align=center>
<a href="apple.php">apple</a>
<a href="peach.php">peach</a>
<a href="banana.php">banana</a>
<a href="strawberry.php">strawberry</a><br>
<a href="carrot.php">carrot</a>
<a href="bean.php">bean</a>
<a href="tomato.php">tomato</a>
<a href="cucumber.php">cucumber</a>
</td></tr></table></body></html>

Now I have written a Greasemonkey script to add an additional link, while keeping all the existing ones:

// ==UserScript==
// @name        link_add_test
// @namespace   file:///D:/Test/
// @description Test for adding an additional link
// @include     file:///D:/Test/test.html
// @version     1
// @grant       none
// ==/UserScript==

var searchstring = 'peach';
var anchors = document.getElementsByTagName('a');

for (i=0; i<anchors.length; i++)
{
    if (anchors[i].innerHTML == searchstring)
    {
        var newlink = document.createElement('a');
        newlink.href      = 'chocolate.php';
        newlink.innerHTML = 'chocolate';
        newlink.target    = '_blank';
        anchors[i].parentNode.insertBefore(newlink, anchors[i].nextSibling);
    }
}

This does almost what I want it to do, but not quite. The output looks like so:

apple peachchocolate banana strawberry
carrot bean tomato cucumber

Why is there no space between "peach" and "chocolate"? When I disable GM and manually add a line to the HTML file with the chocolate link, it is displayed like so:

apple peach chocolate banana strawberry
carrot bean tomato cucumber

This is what I want to achieve. Where is the mistake in my GM script? I have literally tried for several hours now, but I cannot find it. :-(

score 3 · Accepted Answer · answered Jan 13 '14 at 16:48

Contrary to your expectation, the whitespace between the tags is actually making a difference here:

<a href="peach.php">peach</a>
<a href="banana.php">banana</a>

is NOT the same as

<a href="peach.php">peach</a><a href="banana.php">banana</a>

The first will have whitespace between the a-elements, the second will not.

When you manually add a line into the HTML, no doubt you are formatting it with one a-element per line, so you are producing the first version. But, when you insert a new node with Greasemonkey, you are producing the second version. If you want whitespace, you have to insert it as well:

var searchstring = 'peach';
var anchors = document.getElementsByTagName('a');

for (i=0; i<anchors.length; i++)
{
    if (anchors[i].innerHTML == searchstring)
    { 
        var foo = document.createTextNode(' ');
        var newlink = document.createElement('a');
        newlink.href      = 'chocolate.php';
        newlink.innerHTML = 'chocolate';
        newlink.target    = '_blank';       
        anchors[i].parentNode.insertBefore(newlink, anchors[i].nextSibling);
        anchors[i].parentNode.insertBefore(foo, anchors[i].nextSibling);

    }
}

Greasemonkey: Add a link in a table

1 Answers1

Linked