How to add target=”_blank” to a link using jQuery ?

Given an anchor tag inside a DIV element and the task is to add target=”_blank” to the anchor element. There are two methods discussed below to solve this problem:

Approach 1:

  • Select the outer DIV element of anchor element.
  • Use .attr() method to set the target property to “_blank” of the anchor element.

How to Check all attributes of any element in a string:



  • First select the element.
  • Use .attributes method to get access to every attribute of element.
  • Use string concatenation to append every attribute and its value to the string.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to add target="_blank"
        to a link using jQuery ?
    </title>
      
    <script src=
    </script>
</head
  
<body style = "text-align:center;"
      
    <h1 style = "color: green"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 20px; font-weight: bold;">
    </p>
      
    <div id="outer">
        <a id = "a" href="https://www.geeksforgeeks.org">
            THIS IS LINK
        </a>
    </div>
    <br>
      
    <button onclick = "gfg_Run()"
        Click Here
    </button>
      
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 26px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = 'Click on the button to add'
                    + ' target="_blank" to the link.';
      
        // This function only returns all attribute
        // properties of DOM element as a string and
        // has nothing to do with the target property
        function getAttr() {
            var elmt = document.getElementById("a");
      
            // Adding the every attribute to the string.
            for (var i = 0, attr = elmt.attributes,
            n = attr.length, str = ""; i < n; i++) {
                str = str + attr[i].nodeName + "='"
                    + attr[i].nodeValue + "'<br>";
            }
              
            // Returns the atring of attributes
            return str;
        }
          
        el_down.innerHTML = getAttr();
          
        function gfg_Run() {
              
            // Set the target property to '_blank'.
            $('#outer a').attr('target', '_blank');
            el_down.innerHTML = getAttr();
        
    </script
</body
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • First select the outer DIV and then the inner anchor element with the help of document.getElementByID() and document.getElementsByTagName() method respectively.
  • Use .setAttribute(‘target’, ‘_blank’) method to set the target attribute.

How to see all attributes of any element as a string:

  • first select the element.
  • Use .attributes method to get access to every attribute of element.
  • Use string concatenation to append every attribute and its value to the string.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to add target="_blank"
        to a link using jQuery ?
    </title>
</head
  
<body style = "text-align:center;"
      
    <h1 style = "color: green"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style
        "font-size: 20px; font-weight: bold;">
    </p>
      
    <div id="outer">
        <a id = "a" href="https://www.geeksforgeeks.org">
            THIS IS LINK
        </a>
    </div>
    <br>
      
    <button onclick = "gfg_Run()"
        Click Here
    </button>
      
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 26px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = 'Click on the button to add'
                    + ' target="_blank" to the link.';
          
        // This function returns all attribute properties
        // of DOM element as a string and has nothing
        // to do with the target property
        function getAttr() {
            var elmt = document.getElementById("a");
              
            for (var i=0, attr=elmt.attributes,
            n=attr.length, str = ""; i<n; i++){
                str = str + attr[i].nodeName + "='"
                    + attr[i].nodeValue + "'<br>";
            }
            return str;
        }
        el_down.innerHTML = getAttr();
          
        function gfg_Run() {
              
            // Getting the anchor element inside the outer DIV.
            var el = document.getElementById('outer')
                    .getElementsByTagName('a');
              
            for (var i = 0; i < el.length; i++){
                  
                // Set the target property of every anchor
                // element inside the outer DIV
                el[i].setAttribute('target', '_blank');
            }
            el_down.innerHTML = getAttr();
        
    </script> 
</body
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.