给定一个HTML文档, 任务是创建一个JavaScript链接, 并使用JavaScript将其添加到文档中。
方法：
- 创建锚点<a>元素。
- 创建带有一些文本的文本节点, 该文本将显示为链接。
- 将文本节点附加到锚点<a>元素。
- 设置<a>元素的title和href属性。
- 在正文中添加<a>元素。
范例1：在此示例中, 将通过JavaScript方法创建节点并设置属性。
<!DOCTYPE HTML>
< html >
< head >
< title >
How to create a link in JavaScript ?
</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
lsbin
</ 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.lsbin.org";
// Append the anchor element to the body.
document.body.appendChild(a);
}
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
单击按钮后：
范例2：此示例与上面的示例相似, 但是使用prepend()方法将锚点元素添加到主体。
<!DOCTYPE HTML>
< html >
< head >
< title >
How to create a link in JavaScript ?
</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
lsbin
</ 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.lsbin.org";
// Append the anchor element to the body.
document.body.prepend(a);
}
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
单击按钮后：
