给定一个HTML文档,如何使用JavaScript创建链接,并将其添加到文档中。
做法:
● 创建一个锚<a>元素。
● 创建一个文本节点,其中包含一些将显示为链接的文本。
● 将文本节点附加到锚<a>元素。
● 设置<a>元素的title和href属性。
● 在body中追加<a>元素。
示例1:使用appendChild()方法将锚a元素添加到正文:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="text-align:center;"> <p style="font-size: 19px; font-weight: bold;">单击按钮,可使用JavaScript生成链接</p> <button onclick="Fun()">点击这里</button> <p id="DOWN" style="color: green; font-size: 24px; font-weight: bold;"></p> <script> var el_down = document.getElementById("DOWN"); function Fun() { var a = document.createElement('a'); //为锚a元素创建文本节点 var link = document.createTextNode("这是链接!"); // 将文本节点追加到锚a元素 a.appendChild(link); // 设置title. a.title = "这是链接!"; // 设置href属性 a.href = "https://www.html.cn"; // 将锚元素附加到body document.body.appendChild(a); } </script> </body> </html>
示例2:使用prepend()方法将锚a元素添加到正文:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="text-align:center;"> <p style="font-size: 19px; font-weight: bold;">单击按钮,可使用JavaScript生成链接</p> <button onclick="Fun()">点击这里</button> <p id="DOWN" style="color: green; font-size: 24px; font-weight: bold;"></p> <script> var el_down = document.getElementById("DOWN"); function Fun() { var a = document.createElement('a'); //为锚a元素创建文本节点 var link = document.createTextNode("这是链接!"); // 将文本节点追加到锚a元素 a.appendChild(link); // 设置title. a.title = "这是链接!"; // 设置href属性 a.href = "https://www.html.cn"; // 将锚元素附加到body document.body.prepend(a); } </script> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: