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

最新推荐文章于 2022-11-29 15:06:45 发布

weixin_45587319

最新推荐文章于 2022-11-29 15:06:45 发布

阅读量3.4k

点赞数 3

分类专栏： JavaScript HTML 文章标签： html javascript

原文链接：https://www.html.cn/qa/javascript/10362.html

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

给定一个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 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>

效果图：