Teach with us

How to find the href and target attributes in a link in JavaScript?

Front End TechnologyJavascriptObject Oriented Programming

First, let us understand how attributes work in JavaScript. Any element's attributes can be changed with JavaScript. The attributes property stores them, and invoking it gives you direct access to them. If we target an element with a class, the class will also appear as an attribute, and we can actually utilize these attribute methods to change classes if we so choose. Now, keep in mind that while we have designated the properties and methods for classes, you can also utilize all of these characteristics to manipulate classes in any element if necessary.

href attributes in JavaScript

In the href attribute of the anchor tag, HTML permits the placement of links. Therefore, you must construct links dynamically and assign them to the href attribute of the HTML anchor element when developing a JavaScript-based application where you must manage everything programmatically.

This is the main reason that you need JavaScript in order to build a link, and this is what we will discuss in this article. With that said, let's take a closer look at how we can quickly construct a link using JavaScript.

Important points to remember to create href attributes

  • Make an anchor element <a>.

  • Make a text node that contains some text that will appear as a link.

  • The text node should be added to the anchor <a>element.

  • Set the <a> element's title and href properties.

  • In the body, add the <a> element.

Example 1

In this example let us understand How to create a link using javaScript. We must first use javaScript to build an anchor tag. We can use the code given below to create an anchor. We'll need this later, so make an element (with an < a> tag) and assign it to the variable " myAnchor" − The code provided below can be used to create an anchor. Create an element (with an < a> tag) and assign it to the "anchor" variable. The javaScript code in the next line will be used to place the link in the href property of the < a> tag.

<!DOCTYPE html>
<html>
   <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Click to view my website</p>
   <script>
      let myAnchor = document.createElement('a');

      let textToLink = document.createTextNode("Tutorialspoint Website");

      myAnchor.appendChild(textToLink);
      myAnchor.href = "https://www.tutorialspoint.com/";
      document.body.appendChild(myAnchor);
   </script>
</body>
</html>

Example 2

In this example let us understand how the node is created and the attributes are set by the JavaScript methods.

<!DOCTYPE html>
<html>
   <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>To generate a link using JavaScript, press the button.</p>
   <button onclick = "myFun()">
      Click Me
   </button>
   <script>
      function myFun() {
         let x = document.createElement('a');
         let textTolink = document.createTextNode("This is link");
         x.appendChild(textTolink);
         x.title = "This is Link";
         x.href = "https://www.tutorialspoint.com/";
         document.body.appendChild(x);
      }
   </script>
</body>
</html>

target attributes in JavaScript

Here let us understand about target attributes in JavaScript. When a user clicks on a link, the HTML target attribute specifies in which the linked document shall open. The linked document shall open in a new tab if target=" blank" is specified with the anchor element; else, it will do so in the existing tab.

There are two ways to carry out this task. One is the conventional, lengthy method that involves writing the target=" blank" property inside the HTML tag. Javascript code execution is a further practical method.

We will first develop an event function that is called after each click, and if an anchor tag is present but the target attribute is not given, the target attribute is set to "_blank".

Example 3

The following JavaScript example shows how to use target=" blank" −

<!DOCTYPE html>
<html>
   <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <a href="https://www.tutorialspoint.com/">
   Tutorialspoint<br>
   Online tutorials library offering and easy learning on IT & software topic
   </a>
   <script>
      document.addEventListener("click", function(t) {
         if (t.target.tagName == "B" && !t.target.hasAttribute("target")) {
            t.target.setAttribute("target", "_blank");
         }
      });
   </script>
</body>
</html>
raja
Manisha Patil
Updated on 04-Aug-2022 10:28:09

Previous Page Print Page Next Page  
Advertisements