CODEWITHSUNDEEP
javascriptphp
user6176114
user6176114

Reputation: 321

Add extra text at the end of the all the links in a certain class

I have created an 'a' element with class "fragment". I am looking for PHP/JS code, which adds some extra text at the end of all the URL's inside class fragment.

For example:

<a class="fragment" href="http://google.com/" target="_blank">click here</a>

The above code should automatically change to

<a class="fragment" href="http://google.com/extratext" target="_blank">click here</a>

I tried this code but it doesn't work at all. The link when clicked still leads to the original URL

$("a").click(function() {
$(this).prop("href", $(this).prop("href") + "extratext");
});

Any help would be greatly appreciated!

Upvotes: 1

Views: 100

Answers (5)

Error404
Error404

Reputation: 744

This snippet appends the href attribute if the link on click: 

 document.getElementsByClassName("link")[0].addEventListener("click", function () {
      this.href += "extratext";
});
<a class="link" href="http://google.com/" target="_blank">click here</a>

If you want to prevent multiple adding use this one: 

 document.getElementsByClassName("link")[0].addEventListener("click", function () {
    if(this.hasExecuted) return; 
     this.href += "extratext";
     this.hasExecuted = true; 
});
<a class="link" href="http://google.com/" target="_blank">click here</a>

If you want to prevent multiple adding to the url, but add it too all links: 

NodeList.prototype.addEventListener = function(type, handler) {
    for(var node of this)
        node.addEventListener(type, handler);
}

HTMLCollection.prototype.addEventListener = function(type, handler) {
    for(var node of this)
        node.addEventListener(type, handler);
}
var hasExecuted = false;       
var links = document.getElementsByClassName("link");
links.addEventListener("click", function () {
    if(hasExecuted) return; 
     for(var link of links)
         link.href += "extratext";
     hasExecuted = true; 
});
<a class="link" href="http://google.com/" target="_blank">click here</a>
<a class="link" href="http://http://stackoverflow.com/" target="_blank">click here too</a>

If you do not want to change the actual href attribute of the link do this instead: 

       
 document.getElementsByClassName("link")[0].addEventListener("click", function () {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = this.href + "extratext";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}, false);
<a class="link" href="http://google.com/" target="_blank">click here</a>

The script as an easy to use function: 

  openWithAppendedUrl(document.getElementsByClassName("link")[0], "sometext");

function openWithAppendedUrl(link, urlPart) {
    link.addEventListener("click", function () {
        var a = document.createElement("a");
        a.target = "_blank";
        a.href = this.href + urlPart;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }, false);
}
<a class="link" href="http://google.com/" target="_blank">click here</a>

Upvotes: 0

Petya Naumova
Petya Naumova

Reputation: 717

Or, you can find the href of the element you want, after that you can set a new value of its href attribute, which replaces the old one, like this:

 <a class="fragment" href="http://stackoverflow/" target="_blank" onclick="addExtraText()">click here</a>

    function addExtraText() {
     var linkElement = document.getElementsByClassName("fragment")[0];
     linkElement.setAttribute('href', 'http://stackoverflow/questions/');
   }

Upvotes: 0

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14679

Use attr property to get current anchor tag href.

$("a").click(function () {
  $(this).attr("href", $(this).attr("href") + "extratext");
});
       
<a class="fragment" href="http://google.com/" target="_blank">click here</a>

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You can use the setAttribute and getAttribute:

window.addEventListener('DOMContentLoaded', function(e) {
  
  //
  // get all elements with that class
  //
  var fragments = document.getElementsByClassName('fragment');
  
  //
  // for each element attach the event handler
  //
  for(var i = 0; i<fragments.length; i++) {
    fragments[i].addEventListener('click', function(e) {
      
      // add extra text
      var href = this.getAttribute('href');
      this.setAttribute('href', href + 'extratext');
      
      console.log(this.outerHTML);
    }, false);
  }
});
<a class="fragment" href="http://google.com/" target="_blank">click here</a>

Upvotes: 0

Nikhil Vaghela
Nikhil Vaghela

Reputation: 2096

Try this.

attr return your a tag attribute.

$("a").click(function() {
   $(this).attr("href",$(this).attr("href") + "extratext"));
});

See here to know more. http://api.jquery.com/attr/

Upvotes: 1

Related Questions