我如何添加“href”属性的链接动态使用JavaScript呢？

在前端开发中，动态创建链接是一项常见的任务。有时候我们需要在页面上添加新的链接，但是这些链接的 href 属性需要根据上下文或者用户输入动态生成。本文将介绍你如何使用 JavaScript 动态添加并设置 href 属性的链接。

静态创建链接

在开始动态创建链接之前，先来看一下静态创建链接的方式。假设我们要在 HTML 中创建一个指向 Google 搜索的链接，代码如下：

<a href="https://www.google.com/">Google</a>

这是最基本的链接格式，其中 href 属性用于指定链接的目标地址。当用户点击链接时，浏览器会加载该地址对应的网页。

动态创建链接

现在我们假设需要动态创建链接，即在 JavaScript 代码中创建链接元素，并设置其中的 href 属性。以下是实现该功能的代码示例：

const link = document.createElement('a');
link.textContent = 'Click me!';
link.setAttribute('href', 'https://www.google.com/');
document.body.appendChild(link);

在这段代码中，首先通过 document.createElement 方法创建一个链接元素 <a>，然后使用 textContent 属性为其设置显示文本。接着，使用 setAttribute 方法设置 href 属性的值。最后，使用 appendChild 方法将链接元素添加到页面中。

当用户点击此链接时，浏览器会自动打开一个新窗口，显示指定的 URL。

动态设置链接目标

除了动态设置链接地址之外，有时候我们还需要动态设置链接的目标。例如，在单页应用程序中，页面可能使用 JavaScript 动态加载内容，而这些内容可能在同一个页面中显示。为了避免在新标签页或窗口中打开链接，我们可以使用 target 属性将其设置为 _self，代码示例如下：

const link = document.createElement('a');
link.textContent = 'Click me!';
link.setAttribute('href', '#section1');
link.setAttribute('target', '_self');
document.body.appendChild(link);

在这段代码中，我们创建了一个跳转到页面中的特定部分的链接，并通过 target 属性将其设置为在当前窗口中打开。

总结

本文介绍了如何使用 JavaScript 动态创建并设置链接的 href 属性，以及如何动态设置链接的目标。当需要根据上下文或用户输入动态生成链接时，你可以使用这些技巧来实现。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15683