Javascript - How to add to all href="" of a div a domain "http://site.com"

Question

I’m with a system that seeks product suggestions via ajax. He pulls the information, but this information comes from an external site, and he has the local URL. href="/produto/123, need to get it inserted in all href="", the domain of the site. Ex: href="http:/meusite.com/produto/123. For a better explanation, I need all the href="" contained within:

<div class="recommendation-shelf"></div>

Be aggregated http://meusite.com inside href="<urldomeusite>/produto/123" being like this:

href="http://meusite.com/producto/123"

Note: If possible, in Pure Javascript...

Answer 1

There is a new way to do this. It was added to HTML 5 and is base.

The base tells the browser that all non-absolute urls start at that url. You can only have 1 per page, others will be ignored.

An example would be like this:

<base href="http://answall.com">
<a href="/questions/tagged/javascript+html">Tag JavaScript</a>

If there are different sites and need to change only in some elements you can do so:

var site = 'http://meusite.com';
var ancoras = document.querySelectorAll('.recommendation-shelf a');
[].forEach.call(ancoras, function(a) {
    var href = a.getAttribute('href').split('/').filter(Boolean);
    a.href = [site].concat(href).join('/');
    
    // isto é só para o exemplo
    a.innerHTML = a.href;
});

a {display: block;}

<a href="/questions/tagged/javascript+html">Tag JavaScript</a>
<div class="recommendation-shelf">
    <a href="questions/tagged/javascript">Tag JavaScript</a>
    <a href="/questions/tagged/html">Tag HTML</a>
</div>

Answer 2

I am using jquery

#I edited

$(document).ready(function(){
  $(".recommendation-shelf").change(function() {
    $('.recommendation-shelf').find('a').each(function(i, obj) {
        var href = $(obj).attr('href');
        $(obj).attr('href', 'http://meusite.com/'+href)
    });
  })
})