Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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;">
        GeeksforGeeks
    </h1>
 
    <h2>
        Click on the button to add
        target="_blank" to the link
    </h2>
 
    <div id="outer">
        <a id="a" href="https://www.geeksforgeeks.org">
            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:

target_blank

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;">
        GeeksforGeeks
    </h1>
 
    <h2>
        Click on the button to add
        target="_blank" to the link
    </h2>
 
    <div id="outer">
        <a id="a" href="https://www.geeksforgeeks.org">
            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:

target_blank



Last Updated : 25 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads