View Discussion Improve Article Save Article ReadDiscussView Discussion Improve Article Save Article 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;">
<h2 style = "color:green;" >
GeeksForGeeks
</h2>
<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.
// 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 anchor element to the body. <!DOCTYPE HTML>
<html>
<head>
<title>
How to create a link in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h2 style = "color:green;" >
GeeksForGeeks
</h2>
<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.
// 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.
How do you make a link in JavaScript?
How to create a link in JavaScript ? // Create anchor element. var a = document.. 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.. What is links used for?
Websites use hyperlinks as a way to navigate online content. Hyperlinks can point to web content that is part of that website, or it can point to web content that is part of external websites. Both images and text can be used to create a hyperlink.
What is a link in code?
A hyperlink connects one online location to another. You click on hyperlinks to “jump” to different web pages on the Internet or other parts of the same web page. In HTML code, hyperlinks are usually added to an element that describes the link (anchor text.) You can add hyperlinks to text, images, videos, and more.
What is a link example?
A link is defined as a ring or loop that makes up a chain. An example of a link is a silver chain necklace. An example of a link is a bicycle chain.
| 
