In this article, we are given an HTML document and the task is to create a JavaScript link and add it to the document using JavaScript.
Approach:
- Create an anchor <a> element.
- Create a text node with some text which will display as a link.
- Append the text node to the anchor <a> element.
- Set the title and href property of the <a> element.
- Append <a> element in the body.
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;" >
GeeksForGeeks
</ 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.geeksforgeeks.org";
// 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;" >
GeeksForGeeks
</ 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.geeksforgeeks.org";
// 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.