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.

What scripting language is "find all <span> tags" WishfulThinking language? — mplungjan
– mplungjan, Commented Mar 11, 2013 at 13:41
There should be a language like that! I can see it now englishscript — howderek
– howderek, Commented Mar 11, 2013 at 13:42

dfsq · Accepted Answer · 2013-03-11 13:58:15Z

9

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/

edited Mar 11, 2013 at 13:58

answered Mar 11, 2013 at 13:47

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

howderek Over a year ago

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

dfsq Over a year ago

@mplungjan 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.

dfsq Over a year ago

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

dfsq Over a year ago

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

Zox Over a year ago

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.

|

mplungjan · Accepted Answer · 2013-03-11 14:48:26Z

4

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]);
    }       
  }
}

edited Mar 11, 2013 at 14:48

answered Mar 11, 2013 at 13:46

mplungjan

180k29 gold badges183 silver badges246 bronze badges

5 Comments

Zox Over a year ago

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

mplungjan Over a year ago

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

Zox Over a year ago

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" >

mplungjan Over a year ago

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

Zox Over a year ago

Already solved - thanks (Using URL parsed from the page) - stackoverflow.com/questions/15341473/…

Collectives™ on Stack Overflow

Dynamically Insert Links Inside Span Tag Using Javascript

2 Answers 2

7 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related