JavaScript 比 HTML 更為靈活，可以讓我們實作更複雜的功能，其中包含新增連結。下面就讓我們來學習在 JavaScript 中如何加連結。
新增基本連結
我們可以使用 JavaScript 中的 DOM（文件物件模型）來操作 HTML 元素，從而實現新增連結的功能。
在HTML 中，我們常使用「a」標籤新增連結：
<a href="https://www.example.com">这是一个链接</a>
在JavaScript 中，我們可以使用以下程式碼新增連結：
// 创建一个 "a" 标签元素
const link = document.createElement("a");
// 设置链接文本
link.textContent = "这是一个链接";
// 设置链接 href 属性
link.href = "https://www.example.com";
// 将链接添加到指定元素内
document.getElementById("linkContainer").appendChild(link);在上述程式碼中，我們首先創建了一個a 元素，然後使用textContent 設定了連結文本，使用href 設定了連結地址，最後使用appendChild 將該連結添加到linkContainer 裡面。
動態生成鏈接
有時我們需要透過 JavaScript 動態產生鏈接，例如從 API 中獲取鏈接，或根據用戶輸入生成不同的鏈接。
以下是一個範例，它從API 中獲取了一組鏈接，並將它們動態添加到了一個列表中：
// 获取链接列表数据
fetch("https://api.example.com/links")
.then(response => response.json())
.then(links => {
// 创建列表元素
const list = document.createElement("ul");
// 遍历链接数组
links.forEach(link => {
// 创建列表项元素
const item = document.createElement("li");
// 创建链接元素
const linkElement = document.createElement("a");
// 设置链接文本和 href 属性
linkElement.textContent = link.title;
linkElement.href = link.url;
// 将链接添加到列表项内
item.appendChild(linkElement);
// 将列表项添加到列表内
list.appendChild(item);
});
// 将列表添加到文档中的某个元素内
document.getElementById("linkList").appendChild(list);
});在上述程式碼中，我們首先使用fetch 方法取得了連結數組，然後建立了一個ul 元素，並遍歷連結數組，為每個連結建立一個li 元素，並將a元素作為其子元素，並最終將整個清單添加到了文件中的某個元素中。
這個例子展示瞭如何從一個 API 中獲取鏈接，並動態地將它們添加到頁面中。
新增事件處理程序
JavaScript 也支援將事件處理程序新增至連結上，這使得我們能夠在使用者點擊連結時執行自訂函數。
以下是一個範例，它為連結添加了一個點擊事件處理程序：
// 创建一个链接元素
const link = document.createElement("a");
// 设置链接文本和 href 属性
link.textContent = "这是一个链接";
link.href = "https://www.example.com";
// 添加点击事件处理程序
link.addEventListener("click", event => {
// 阻止默认行为
event.preventDefault();
// 在新窗口打开链接
window.open(link.href);
});
// 将链接添加到文档中的某个元素内
document.getElementById("linkContainer").appendChild(link);在上述程式碼中，我們首先建立了一個連結元素，並為其添加點擊事件處理程序。當使用者點擊該連結時，執行回調函數，該函數首先阻止預設行為（即開啟連結），然後在新視窗中開啟連結。
總結
在 JavaScript 中加入連結非常簡單，只需要使用 DOM 元素操作就可以輕鬆實現。我們可以建立連結元素、動態生成連結元素、為連結添加事件處理程序等。這些功能可以幫助我們快速建立互動性強、功能豐富的網站。
以上是javascript怎麼加鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章！
