Insert link with text from another link greasemonkey

Question

What I want to do is insert a link and img for every thread of this forum I use. The href of the link should be based on the href of a child of the element. Here is a partial view of the HTML, I've taken out some things for clarity, let me know if I've taken too much. The very last tag repeats 20 or so times, depending how much threads are visible in preferences

<div id="content">
 <form id="page_form">
  <div id="forums">
   <table class="grid forumtable">
    <tr></tr>
    <tr></tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
     <td>
     <div class="lastposter">
      <a></a>
      <a href="view/1234/?page=last#845612"><img></img></a>
     </div>
     </td>
    </tr>
    <tr> ...same as above.. x20 </tr>
   </table>
  </div>
 </form>
</div>

So here is my code so far, which is working by inserting a static link. What I want, is the link to use the value after # from the previous link.

var lastpst = document.getElementsByClassName('lastposter');
for (var i=0; i < lastpst.length; i++){
 links = document.createElement('a');
 links.setAttribute('href','we.html');
 links.innerHTML ='<a href="we.html"><img src="/static/img/silk/zoom.png" /></a>';
 lastpst[i].appendChild(links);
}

So how can I access the a tag from lastpst[i] and use the href to create my own link?

I was thinking it could be possible to write this using XPATH but I couldn't quite get my head around it. Would it be a good idea in this case?

Sorry for the long-winded question.

Answer 1

First, in your code sample above you realize you are creating one link (A tag), and then nesting a second link inside of it via innerHTML? You might not want to do that...

If I understand the problem correctly, here is what I would do:

var lastpst = document.getElementsByClassName('lastposter');
for (var i=0; i < lastpst.length; i++){

 var secondLink = lastpst[i].getElementsByTagName('a')[1];
 var secondLink = secondLink.href;

 // whatever you need your own code to do...
}

Hope this helps.

Answer 2

Actually I think I solved it.. (thanks michael, I've fixed this code up thanks to your input)

var lastpst = document.getElementsByClassName('lastposter');

for (var i=0; i < lastpst.length; i++){
 l = lastpst[i].getElementsByTagName('a')[1];
 ln = l.getAttribute('href');
 ln = ln.replace(/(?:.*?)#([0-9]{6})/,'/post/view/$1');

 links = document.createElement('a');
 links.setAttribute('href',ln);
 links.innerHTML ='<img src="/static/img/silk/zoom.png" />';
 lastpst[i].appendChild(links);
}

Anyone see anything wrong with this?

Answer 3

Going on your own response, you should really handle the DOM manipulation yourself instead of inserting it inside another tag. Also, putting A tags in A tags is probably a bad idea.

var lastpst = document.getElementsByClassName('lastposter');

for (var i=0; i < lastpst.length; i++){
    l = lastpst[i].getElementsByTagName('a');
    ln = l[1].getAttribute('href');
    ln = ln.replace(/(?:.*?)#([0-9]{6})/,'/post/view/$1');

    links = document.createElement('a');
    links.href = ln;

    img = document.createElement('img');
    img.src = "/static/img/silk/zoom.png"
    links.appendChild(img);

    lastpst[i].appendChild(links);
}