js動態連結<a>元素程式碼例項

antzone發表於2017-04-08
JS

本章節通過一個程式碼例項介紹一下如何動態的建立一個連結元素。

並且讓此連結的主要屬性就是生效的，比如能夠點選進入一個指定的網頁。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function AppendLink() {
  var odiv=document.getElementById("antzone");
  var linkTmp=document.createElement("a");
  linkTmp.href="http://www.softwhy.com";
  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.softwhy.com"，為連結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()一章節。

相關文章