HTML中如何使用JavaScript创建链接？

给定一个HTML文档，如何使用JavaScript创建链接，并将其添加到文档中？下面本篇文章就来给大家介绍一下在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 οnclick="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";// 将锚元素附加到bodydocument.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 οnclick="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";// 将锚元素附加到bodydocument.body.prepend(a);}</script></body></html>

HTML中如何使用JavaScript创建链接？相关推荐

linux中ln(link)命令创建链接以及链接的删除和更新
ln(即link) 的功能是为某一个文件在另外一个位置建立一个同步的链接.有两种链接方式,一种是硬链接(hard link),另一种是符号链接(symbolic link),又称软链接.硬链 ...
我可以在Markdown中使用“ target =“ _ blank””创建链接吗？
有没有一种方法可以在Markdown中创建一个在新窗口中打开的链接? 如果没有,建议您使用哪种语法. 我将其添加到我使用的markdown编译器中. 我认为这应该是一个选择. #1楼尝试使用PHP实 ...
sql server中创建链接服务器图解教程
转自sql server中创建链接服务器图解教程 1.展开服务器对象-->链接服务器-->右击"新建链接服务器" 注意:必须以数据库管理员身份登录(通常也就是sa帐号) ...
sqlserver中创建链接服务器图解教程
1.展开服务器对象-->链接服务器-->右击"新建链接服务器" 注意:必须以数据库管理员身份登录(通常也就是sa帐号)后,才可以创建"链接服务器" ...
如何在另一个JavaScript文件中包含一个JavaScript文件？
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
html语言中,定义文档中一个正在打开的链接的颜色的代码是,2017微软认证考试精选练习（附答案）...
2017微软认证考试精选练习(附答案) 1.如果要使图像在缩放时不失真,在图像显示原始大小时,按下( )键,拖动图像右下方的控制点,可以按比例调整图像大小 B A. Ctrl B. Shift C ...
一步一步学Silverlight 2系列（22）：在Silverlight中如何用JavaScript调用.NET代码_转载...
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
javascript创建类_如何使用JavaScript创建吹气效果
javascript创建类 Have you ever wondered how you can create a realistic air blowing effect with JavaScri ...
Javascript 创建书签小工具（bilibili视频下载为例）
书签小工具(Bookmarklets)是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能.这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践 ...
使用 Vanilla JavaScript 创建 Web 组件
Web 应用程序开发是一个非常拥挤的技术领域.有不同类型的框架.库和工具.在开发 Web 应用程序时,主要目标是提供带有封装组件的高质量用户界面 (UI). 因此,当您使用 React.Vue.Ang ...

HTML中如何使用JavaScript创建链接？

HTML中如何使用JavaScript创建链接？相关推荐

最新文章

热门文章