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 tags" WishfulThinking language? — mplungjan, Mar 11 '13 at 13:41
There should be a language like that! I can see it now **englishscript** — howderek, Mar 11 '13 at 13:42
Have you tried using JQuery? Filters should provide the majority of object filtering that you need. — Paul, Mar 11 '13 at 13:42
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. http://www.seomofo.com/img/lazy-loading-affiliate-marketing-anchors.png — Zox, Mar 11 '13 at 13:49
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." — Tim Goodman, Mar 11 '13 at 13:58

dfsq · Accepted Answer · 2013-03-11T13:58:15.947

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 '13 at 13:58

answered Mar 11 '13 at 13:47

dfsq

191,768
25
236
258

I have never seen a `for` formatted like that. Does it exit because when `i--` to `0` it is falsey? – howderek Mar 11 '13 at 13:48
@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 Mar 11 '13 at 13:56
Yes, of course it *moves* the image inside the link, this is what we need. – dfsq Mar 11 '13 at 14:00
Why? Moving the nodes is much more efficient then recreating them. In fact `appendChild` is constructed to aim this goal: insert and move. – dfsq Mar 11 '13 at 14:06
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 . There is only one such link on the whole page. – Zox Mar 11 '13 at 14:36
No problem, but you need to post it as separate question. – dfsq Mar 11 '13 at 14:38
Thanks. Here it is http://stackoverflow.com/questions/15341473/extract-url-from-html-using-javascript-and-use-it-in-a-function – Zox Mar 11 '13 at 14:50

mplungjan · Answer 2 · 2013-03-11T14:48:26.223

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 '13 at 14:48

answered Mar 11 '13 at 13:46

mplungjan

169,008
28
173
236

Well the demo actually doesn't output clickable images. They should be clickable. – Zox Mar 11 '13 at 14:06
Please look again. I had a typo in the getElements - I left the <> around the span – mplungjan Mar 11 '13 at 14:13
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) - – Zox Mar 11 '13 at 14:32
Added the class and rel, not sure what you mean by parse the link – mplungjan Mar 11 '13 at 14:48
Already solved - thanks (Using URL parsed from the page) - http://stackoverflow.com/questions/15341473/extract-url-from-html-using-javascript-and-use-it-in-a-function?answertab=active#tab-top – Zox Mar 11 '13 at 16:08

Dynamically Insert Links Inside Span Tag Using Javascript

2 Answers2

Linked