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 the 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 the 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= </script></head><body style="text-align:center;"> <h1 style="color: green;"> zambiatek </h1> <h2> Click on the button to add target="_blank" to the link </h2> <div id="outer"> THIS IS LINK </a> </div> <br> <button onclick="gfg_Run()"> Click Here </button> <h2 id="Result" style="color:green;"></h2> <script> let res = document.getElementById("Result"); // This function only returns all attribute // properties of DOM element as a string and // has nothing to do with the target property function getAttr() { let elmt = document.getElementById("a"); let attr = elmt.attributes, str = "", n = attr.length; // Adding the every attribute to the string. for (let i = 0; i < n; i++) { str = str + attr[i].nodeName + "='" + attr[i].nodeValue + "'<br>"; } // Returns the string of attributes return str; } res.innerHTML = getAttr(); function gfg_Run() { // Set the target property to '_blank'. $('#outer a').attr('target', '_blank'); res.innerHTML = getAttr(); } </script></body></html> |
Output:
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> <script src= </script></head><body style="text-align:center;"> <h1 style="color: green;"> zambiatek </h1> <h2> Click on the button to add target="_blank" to the link </h2> <div id="outer"> THIS IS LINK </a> </div> <br> <button onclick="gfg_Run()"> Click Here </button> <h2 id="Result" style="color:green;"></h2> <script> let res = document.getElementById("Result"); // This function returns all attribute properties // of DOM element as a string and has nothing // to do with the target property function getAttr() { let elmt = document.getElementById("a"); let attr = elmt.attributes, n = attr.length, str = ""; for (let i = 0; i < n; i++) { str = str + attr[i].nodeName + "='" + attr[i].nodeValue + "'<br>"; } return str; } res.innerHTML = getAttr(); function gfg_Run() { // Getting the anchor element inside the outer DIV. let el = document.getElementById('outer') .getElementsByTagName('a'); for (let i = 0; i < el.length; i++) { // Set the target property of every anchor // element inside the outer DIV el[i].setAttribute('target', '_blank'); } res.innerHTML = getAttr(); } </script></body></html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
