js动态链接<a>元素代码实例
分类：实例代码
本章节通过一个代码实例介绍一下如何动态的创建一个链接元素。
并且让此链接的主要属性就是生效的，比如能够点击进入一个指定的网页。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
function AppendLink() {
var odiv=document.getElementById("antzone");
var linkTmp=document.createElement("a");
linkTmp.href="http://www.pipipi.net";
linkTmp.innerText="前端教程网";
odiv.appendChild(linkTmp);
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
AppendLink();
}
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="添加链接"/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.function AppendLink() {}，此函数实现了创建追加功能。
（2）.var odiv=document.getElementById("antzone")，获取div元素对象。
（3）.var linkTmp=document.createElement("a")，创建连接a元素对象。
（4）.linkTmp.href="http://www.pipipi.net"，为链接a元素设置href属性值。
（5）.linkTmp.innerText="前端教程网"，设置连接内部文本内容，当然也可以使用document.createTextNode()。
（6）.odiv.appendChild(linkTmp)，将连接追加到div元素。
二.相关阅读:
（1）.document.createElement()方法可以参阅document.createElement()一章节。
（2）.appendChild()方法可以参阅js appendChild()一章节。
（3）.document.createTextNode()可以参阅document.createTextNode()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu