How to Create a Link in JavaScript ?
In web development, it’s crucial to optimize your website not only for functionality but also for search engine optimization (SEO). One key aspect of SEO involves dynamically incorporating JavaScript links into your HTML documents. This approach provides enhanced interactivity and accessibility while ensuring search engines can effectively crawl and index your content.
Steps to Create a Link in JavaScript:
- Create an Anchor Element: Begin by creating an anchor (
<a>) element. - Create a Text Node: Create a text node with the desired text to display as the link.
- Append the Text Node: Attach the text node to the anchor element.
- Set Attributes: Set the
titleandhrefproperties of the anchor element to provide additional information and the destination URL. - Append the Anchor Element: Finally, append the anchor element to the body or a specific section of your HTML document.
Example 1: In this example, the node is created and the attributes are set by the JavaScript methods.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to create a link in JavaScript?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
w3wiki
</h1>
<p id = "GFG_UP" style =
"font-size: 19px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color: green; font-size: 24px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to generate "
+ "a link using JavaScript.";
function GFG_Fun() {
// Create anchor element.
var a = document.createElement('a');
// Create the text node for anchor element.
var link = document.createTextNode("This is link");
// Append the text node to anchor element.
a.appendChild(link);
// Set the title.
a.title = "This is Link";
// Set the href property.
a.href = "https://www.w3wiki.net";
// Append the anchor element to the body.
document.body.appendChild(a);
}
</script>
</body>
</html>
Output:
Example 2: This example is similar to the above but uses prepend() method to add an anchor element to the body.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to create a link in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
w3wiki
</h1>
<p id = "GFG_UP" style =
"font-size: 19px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color: green; font-size: 24px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to generate "
+ "a link using JavaScript.";
function GFG_Fun() {
// Create anchor element.
var a = document.createElement('a');
// Create the text node for anchor element.
var link = document.createTextNode("This is link");
// Append the text node to anchor element.
a.appendChild(link);
// Set the title.
a.title = "This is Link";
// Set the href property.
a.href = "https://www.w3wiki.net";
// Append the anchor element to the body.
document.body.prepend(a);
}
</script>
</body>
</html>
Output:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Contact Us