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:

Solution 1:

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/

Solution 2:

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

document.getElementsByClassName("link")[0].addEventListener("click", function () {
      this.href += "extratext";
});

<aclass="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; 
});

<aclass="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 ofthis)
        node.addEventListener(type, handler);
}

HTMLCollection.prototype.addEventListener = function(type, handler) {
    for(var node ofthis)
        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; 
});

<aclass="link"href="http://google.com/"target="_blank">click here</a><aclass="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);

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

The script as an easy to use function:

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

functionopenWithAppendedUrl(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);
}

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

Solution 3:

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 textvar href = this.getAttribute('href');
      this.setAttribute('href', href + 'extratext');
      
      console.log(this.outerHTML);
    }, false);
  }
});

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

Solution 4:

Use attr property to get current anchor tag href.

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

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

Solution 5:

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>

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

Share