Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the href and target attributes in a link in JavaScript?
In JavaScript, you can access and manipulate the href and target attributes of anchor elements using DOM methods. These attributes control where links point and how they open.
Finding href and target Attributes
You can retrieve these attributes using getAttribute() or directly access them as properties of the anchor element.
<!DOCTYPE html>
<html>
<head>
<title>Finding href and target attributes</title>
</head>
<body>
<a id="myLink" href="https://www.tutorialspoint.com/" target="_blank">TutorialsPoint</a>
<script>
let link = document.getElementById('myLink');
// Method 1: Using getAttribute()
console.log('href:', link.getAttribute('href'));
console.log('target:', link.getAttribute('target'));
// Method 2: Direct property access
console.log('href property:', link.href);
console.log('target property:', link.target);
</script>
</body>
</html>
Creating Links with href Attributes
You can dynamically create anchor elements and set their attributes using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Creating links dynamically</title>
</head>
<body>
<p>Click the button to create a link:</p>
<button onclick="createLink()">Create Link</button>
<script>
function createLink() {
// Create anchor element
let myAnchor = document.createElement('a');
// Create text node
let linkText = document.createTextNode('Visit TutorialsPoint');
// Set attributes
myAnchor.href = 'https://www.tutorialspoint.com/';
myAnchor.target = '_blank';
myAnchor.title = 'TutorialsPoint Website';
// Add text to anchor
myAnchor.appendChild(linkText);
// Add to page
document.body.appendChild(myAnchor);
}
</script>
</body>
</html>
Working with target Attributes
The target attribute specifies where to open the linked document. Common values include _blank (new window/tab), _self (same frame), and _parent (parent frame).
<!DOCTYPE html>
<html>
<head>
<title>Setting target attributes</title>
</head>
<body>
<a href="https://www.tutorialspoint.com/" id="link1">Link without target</a><br>
<a href="https://www.tutorialspoint.com/" id="link2" target="_blank">Link with target</a><br>
<button onclick="addTarget()">Add target="_blank" to first link</button>
<script>
function addTarget() {
let link = document.getElementById('link1');
// Check if target attribute exists
if (!link.hasAttribute('target')) {
link.setAttribute('target', '_blank');
console.log('Target attribute added');
} else {
console.log('Target attribute already exists');
}
}
</script>
</body>
</html>
Methods Comparison
| Method | Usage | Returns |
|---|---|---|
getAttribute() |
Get attribute value | String or null |
setAttribute() |
Set attribute value | void |
| Direct property | Get/set as property | String (absolute URL for href) |
hasAttribute() |
Check if attribute exists | Boolean |
Key Points
- Use
getAttribute()to retrieve attribute values - Use
setAttribute()to set attribute values - Direct property access works for common attributes like
hrefandtarget - Always check if an attribute exists using
hasAttribute()before modifying it -
target="_blank"opens links in new windows/tabs
Conclusion
JavaScript provides multiple ways to access and manipulate href and target attributes of links. Use getAttribute() and setAttribute() for flexible attribute handling, or access them directly as element properties.
7K+ Views
