×

使用JavaScript在HTML中创建链接

作者:天空2019.11.13来源:Web前端之家浏览:6783评论:0
关键词:jsprepend

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


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js82348203984.html

网友评论文明上网理性发言 已有0人参与

发表评论: