0

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.

3 Answers 3

1

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);
}
1
  • Good point.. I always thought that .innerHTML was a dirty hack. Thanks :)
    – aland
    Nov 9, 2009 at 19:08
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.

1

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?

1
  • 1
    Yes, and in the case of link elements you can also check the href attribute directly without having to use getAttribute. However any overhead either way is probably trivial for your needs
    – donohoe
    Nov 9, 2009 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.