Dynamically Insert Links Inside Span Tag Using Javascript

Question

I have this:

<span class="image"><img src="something.jpg"></span>

I want to transform it to that using javascript:

<span class="image"><a href="domain"><img src="something.jpg"></a></span>

It has to be done using javascript in order to hide the affiliate links.

I have tried this script but it seems not to work:

function changespan() {
find all <span> tags;
for each <span> with class="image"{
URL = "http://domain.com"
Create new link to URL;
insert link into <span>;
}       
}

The function is uploaded in file script.js and I load it in this fashion:

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
window.onload = changespan;
</script>

EDIT: After this is solved, how could i parse my page to find links in this format: and then assign this value to variable URL. I need to be able to assign first path to URL_1 second to URL_2 and so on.

Monjan

You seem to be missing this and that... – Shively

What scripting language is "find all <span> tags" WishfulThinking language? – Oversee

Try <script type="pseudocode"> – Executory

There should be a language like that! I can see it now englishscript – Overhaul

Lol @TimGoodman - i named it differently ;) – Oversee

Have you tried using JQuery? Filters should provide the majority of object filtering that you need. – Shively

You call that script o.O – Betelgeuse

Sorry guys, i thought it is a real code. though i wasn't sure. Here is explanation, but i now see this is just a description how is the thing done. seomofo.com/img/lazy-loading-affiliate-marketing-anchors.png – Monjan

No worries, @Zox. "He who asks a question is a fool for five minutes. He who does not ask a question remains a fool forever." – Executory

Answer 1

This is how you can implement it:

function changespan() {
    var spans = document.querySelectorAll('span.image');
    for (var i = spans.length; i--; ) {
        var a = document.createElement('a');
        a.href = "http://domain.com";
        spans[i].appendChild(a).appendChild(a.previousSibling);
    }
}

http://jsfiddle.net/Tqv76/1/

Ladonna

I have never seen a for formatted like that. Does it exit because when i-- to 0 it is falsey? – Overhaul

@Oversee Why should it duplicate the image? Inside the loop a will be always new one with the own image, see a is recreated in the loop. I see your confusion: this is just lorempixel.com caches requests and outputs the same image. I will update the demo to use different images. – Ladonna

Yes, of course it moves the image inside the link, this is what we need. – Ladonna

Why? Moving the nodes is much more efficient then recreating them. In fact appendChild is constructed to aim this goal: insert and move. – Ladonna

Thank you very much. Another thing I need to do is parse link from the page and use it as link.href (URL). The needed link is "link.html" from <a rel="nofollow" href="link.html" class="1" >. There is only one such link on the whole page. – Monjan

No problem, but you need to post it as separate question. – Ladonna

Thanks. Here it is #15341973 – Monjan

Answer 2

Here, I translated it to JavaScript keeping your pseudo code as intact as possible

DEMO

window.onload=function() {
  var spans = document.getElementsByTagName("span"); // or the newer querySelectorAll
  for (var i=0;i<spans.length;i++) {
    if (spans[i].className=="image") {
      var link = document.createElement("a");
      link.href = "http://domain.com";
      link.setAttribute("rel","nofollow");
      link.className="someclass";
      link.innerHTML=spans[i].innerHTML;
      spans[i].replaceChild(link,spans[i].getElementsByTagName('img')[0]);
    }       
  }
}

Oversee

Well the demo actually doesn't output clickable images. They should be clickable. – Monjan

Please look again. I had a typo in the getElements - I left the <> around the span – Oversee

Works now. Thank you very much. This code will be very usefull for many many people. Another thing i need to do is to parse link and use it as link.href (URL) - <a rel="nofollow" href="link.html" class="1" > – Monjan

Added the class and rel, not sure what you mean by parse the link – Oversee

Already solved - thanks (Using URL parsed from the page) - #15341973 – Monjan