在锚标记的 href 属性中使用 JavaScript 变量

Question

考虑我有一个名为link的 JavaScript 变量，它包含一个像这样的 URL： www.google.com 。 我需要在 2 个地方的href属性中包含此变量，例如：

<a href="link">link</a>

这应该返回如下内容： Google

我尝试了各种方法但都失败了。 有可能这样做吗？ JavaScript 变量应该在这两个地方使用。

注意：我还需要使用<a>标签内的变量

Answer 1

假设您的 HTML 中有以下内容

<a href="link" class='dynamicLink'>link</a>
<a href="link" class='dynamicLink'>link</a>

您可以执行以下操作

var href = 'http://www.google.com'; //any other link as wish
var links = document.getElementsByClassName('dynamicLink');

Array.from(links).forEach(link => {
  link.href = href;
  link.innerHTML = href.replace('http://', '');
});

JSFiddle

Answer 2

您可以使用以下代码。

<a id="myLink" href="link">link</a>

在你的 javascript 中尝试

<script>
    var link = "http://www.google.com/";
    document.getElementById('myLink').setAttribute("href",link);
    document.getElementById('myLink').innerHTML = link;
    // Here the link is your javascript variable that contains the url.
</script>

Answer 3

抱歉有任何错字。 写在我的手机上。 你不能即时创建锚点吗？

anchor =Document.createElement (...)
anchor.href=yourvar-value
anchor.innerText=your-value?

如果需要更复杂的事情，请在 Google 上搜索 javascript databiding

小心

Answer 4

您可以通过 jquery 轻松完成此操作。

第一，给你一个班级/身份证。

<a class="mylink">link</a>

然后你可以做这样的事情：

<script  type='text/javascript'>

$(document).ready(function () {
   $("a.mylink").attr("href", link);
});

</script>

如果您希望文本也更改，则必须添加

$("a.mylink").text(link);

到$(document).ready也是如此。

看到它工作： http : //jsfiddle.net/symXp/

Answer 5

你可以这样做 -

工作演示- http://codepen.io/nitishdhar/pen/rJLEH

HTML 部分

<a href="" class="link">Link will be filled by javascript</a>

您需要在 a 标签中放置一个特定的类。 我们将需要它来从 jQuery 中获取这个元素。

Javascript 部分（使用 jQuery）

var link = "http://google.com";
$(document).ready(function(){
  $('.link').attr('href', link);
});

我们需要创建一个变量，link，它将保存您要分配给 a 标签的 URL。 然后在文档准备好时，我们获取 a 元素并使用链接更新其 href 属性。