在前端开发中，动态创建链接是一项常见的任务。有时候我们需要在页面上添加新的链接，但是这些链接的 href 属性需要根据上下文或者用户输入动态生成。本文将介绍你如何使用 JavaScript 动态添加并设置 href 属性的链接。
静态创建链接
在开始动态创建链接之前，先来看一下静态创建链接的方式。假设我们要在 HTML 中创建一个指向 Google 搜索的链接，代码如下：
-- -----------------------------------------
这是最基本的链接格式，其中 href 属性用于指定链接的目标地址。当用户点击链接时，浏览器会加载该地址对应的网页。
动态创建链接
现在我们假设需要动态创建链接，即在 JavaScript 代码中创建链接元素，并设置其中的 href 属性。以下是实现该功能的代码示例：
----- ---- - ---------------------------- ---------------- - ------ ----- ------------------------- --------------------------- --------------------------------
在这段代码中，首先通过 document.createElement 方法创建一个链接元素 <a>，然后使用 textContent 属性为其设置显示文本。接着，使用 setAttribute 方法设置 href 属性的值。最后，使用 appendChild 方法将链接元素添加到页面中。
当用户点击此链接时，浏览器会自动打开一个新窗口，显示指定的 URL。
动态设置链接目标
除了动态设置链接地址之外，有时候我们还需要动态设置链接的目标。例如，在单页应用程序中，页面可能使用 JavaScript 动态加载内容，而这些内容可能在同一个页面中显示。为了避免在新标签页或窗口中打开链接，我们可以使用 target 属性将其设置为 _self，代码示例如下：
----- ---- - ---------------------------- ---------------- - ------ ----- ------------------------- ------------- --------------------------- --------- --------------------------------
在这段代码中，我们创建了一个跳转到页面中的特定部分的链接，并通过 target 属性将其设置为在当前窗口中打开。
总结
本文介绍了如何使用 JavaScript 动态创建并设置链接的 href 属性，以及如何动态设置链接的目标。当需要根据上下文或用户输入动态生成链接时，你可以使用这些技巧来实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15683