Javascript 動態鏈接

在使用Javascript開發網站時，經常需要動態生成鏈接。動態生成鏈接是一種常見的實現方式，它可以更加靈活地操作頁面鏈接，方便用戶進行頁面跳轉。

下面將通過舉例說明Javascript 動態鏈接的應用。

<script>
var url = "http://www.example.com?id=";
var id = "12345";
var link = document.createElement("a");
link.setAttribute("href", url + id);
link.innerHTML = "Click Here";
document.body.appendChild(link);
</script>

上述代碼就是創建一個動態鏈接的例子。我們首先創建了一個變量url，并賦值為需要跳轉的鏈接。接著，我們利用Javascript生成了一個新的鏈接元素，并為其設置了href屬性和innerHTML（即鏈接文本）。最后，我們將這個鏈接添加到了頁面的body元素中。

動態鏈接最常見的應用場景是搜索結果頁面。當用戶搜索某個內容時，我們需要動態生成一系列鏈接，以便用戶查看相應的搜索結果。

<script>
var searchUrl = "http://www.example.com/search?q=";
var query = "javascript";
var results = ["result1", "result2", "result3", "result4", "result5"];
var container = document.getElementById("search-results");
for (var i = 0; i < results.length; i++) {
var link = document.createElement("a");
link.setAttribute("href", searchUrl + query + "&result=" + i);
link.innerHTML = results[i];
container.appendChild(link);
container.appendChild(document.createElement("br"));
}
</script>

上面的代碼中，我們定義了一個搜索鏈接的地址searchUrl，將搜索內容query設為"javascript"，并定義了搜索結果的數組results。接著，我們利用for循環來遍歷results數組，并依次生成鏈接。我們為每個鏈接設置了href屬性，以便跳轉到對應的搜索結果頁面。最后，我們將每個鏈接添加到了頁面的search-results容器中，并加入了一個換行符，以使結果排列更加整齊。

動態鏈接除了可以用于生成跳轉鏈接外，還可以用于改變當前頁面的鏈接。例如，在某些網站中，會動態生成頁面的標題和URL，以便用戶可以更好地瀏覽當前頁面的內容。

<script>
var newTitle = "Javascript Tutorial";
var newUrl = "http://www.example.com/javascript-tutorial";
document.title = newTitle;
history.replaceState(null, newTitle, newUrl);
</script>

上述代碼中，我們定義了一個新的頁面標題newTitle和URL newUrl，然后通過document.title改變了當前頁面的標題。接著，我們利用history.replaceState來改變當前頁面的URL。注意，這種方式不會重新加載頁面，而只是改變了當前頁面的祖先記錄。

Javascript 動態鏈接是網站開發中非常常見的實現方式。通過使用動態鏈接，我們可以更加靈活地操作頁面的跳轉和鏈接文本，讓用戶獲得更加良好的瀏覽體驗。