How to add target="_blank" to a link using jQuery ? - GeeksforGeeks

13 Dec, 2021
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.
html
<!DOCTYPE HTML> <html>   <head>     <title>         How to add target="_blank"        to a link using jQuery ?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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 string 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>
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.
html
<!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>
Before clicking on the button:
After clicking on the button:
sagar0719kumar
jQuery-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills