DEV Community

kanaga vimala
kanaga vimala

Posted on

Today I Learned: How to Create and Set an `href` Attribute in JavaScript.

Sure! Here's a blog-style post that explains how to create and assign the href attribute in JavaScript. This is perfect if you're learning DOM manipulation or building dynamic links.

One of the most common tasks when working with the DOM is dynamically creating links. Whether you're generating links from an API or changing a link’s destination based on user input, knowing how to set the href attribute using JavaScript is essential.

Here’s a quick and easy guide on how to do it!

🔗 What is href?

The href attribute is used in <a> (anchor) tags to specify the URL the link goes to.

<a href="https://example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode

But what if you want to create this dynamically with JavaScript?

🛠️ Creating an Anchor Tag with JavaScript 

// Step 1: Create the anchor element
let link = document.createElement("a");

// Step 2: Set the href attribute
link.href = "https://example.com";

// Step 3: Add link text
link.textContent = "Visit Example";

// Step 4: Add it to the document (e.g., inside the body)
document.body.appendChild(link);
Enter fullscreen mode Exit fullscreen mode

✅ This creates a clickable link that says "Visit Example" and takes you to example.com.

🔁 Alternative: Using setAttribute()

You can also set the href using the setAttribute method:[TBD]

let link = document.createElement("a");
link.setAttribute("href", "https://example.com");
link.textContent = "Visit Example";
document.body.appendChild(link);
Enter fullscreen mode Exit fullscreen mode

Both ways work the same. The direct .href = is cleaner, but setAttribute() can be more flexible if you're working with dynamic attributes or SVG elements.

✨ Bonus: Open Link in a New Tab

If you want the link to open in a new tab, add the target attribute:

link.target = "_blank";
// Or: link.setAttribute("target", "_blank"); [TBD]
Enter fullscreen mode Exit fullscreen mode

And for security:

link.rel = "noopener noreferrer";
Enter fullscreen mode Exit fullscreen mode

This prevents potential security issues when opening external links.

🧪 Use Case: Generating Links from Data

Here’s a more practical example—imagine you have a list of URLs and want to generate links for each:

let urls = ["https://google.com", "https://github.com", "https://openai.com"];

urls.forEach(url => {
  let a = document.createElement("a");
  a.href = url;
  a.textContent = `Go to ${url}`;
  a.target = "_blank";
  a.rel = "noopener noreferrer";
  document.body.appendChild(a);
  document.body.appendChild(document.createElement("br")); // Add a line break
});
Enter fullscreen mode Exit fullscreen mode

🧵 Conclusion

Setting the href attribute in JavaScript is simple but powerful. Whether you're building menus, handling links from APIs, or crafting interactive elements, this skill is a core part of DOM manipulation.

🔁 Use .href = or .setAttribute("href", "...")

✨ Add .target = "_blank" and .rel = "noopener noreferrer" for safe external links

Reference:
I refer the above information in ChatGPT.

Top comments (0)