将 var 从 js 传递到 html答案

【问题标题】：passing var from js to html将 var 从 js 传递到 html
【发布时间】：2017-01-23 12:20:07
【问题描述】：

我已搜索但无法找到我要查找的内容。我有一个 js 文件，其中包含多个 href 链接：

var link1="http://somelink.com"
var link2="http://another.com"
var link3="http://morelinks.com"

等等……会有很多变量

在我的 html 文件中，我希望能够将这些链接中的一个或多个调用为 href。

<a href="link1">my first link</a>
<a href="link3">random link</a>

我的问题是，如何将这些变量中的一个或多个传递给我的 html 文件？

更新：好的，这是 Tugca 提供的带有 sn-p 的代码......我知道我会遗漏一些愚蠢的东西。

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Local Hotels</title>
  <link rel="stylesheet" href="HotelStyleSheet.css" />
  <script>
    var link1 = "http://firstwebsite.com";
    var link2 = "http://anotherwebsite.com";
    document.getElementById("link_1").href = link1;
    document.getElementById("link_2").href = link2;
  </script>
</head>

<body onload=resizeTo(480,270)>

  <div class="list">
    <div class="hotel"> <a id="link_1">My first link</a>
    </div>

    <div class="list">
      <div class="hotel"><a id="link_2">The second link</a>
      </div>
    </div>

</body>

【问题讨论】：

HTML 没有变量，所以你不能传递任何东西。您只能使用 javascript 呈现 HTML 并将其附加到文档中。
您想在页面加载时填充 html 链接还是在页面加载后的某个时间点动态填充？
那么你想在 JavaScript 范围内用它们对应的变量替换 href 吗？
How can I add "href" attribute to a link dynamically using JavaScript?的可能重复
@nicktendo - 在页面加载时填充将是完美的。一旦设置了链接，它们就不会改变，所以动态真的没有必要（至少我不这么认为）

标签： javascript html href var

【解决方案1】：

您不能将变量形式的 JavaScript 传递给 HTML。在正常工作流程中，HTML 将在不知道 JavaScript 之前呈现。但是您可以修改 HTML（或 DOM 元素）。这就是我们使用 JavaScript 的原因。

var link1 = "http://stackoveflow.com/";
document.getElementById("link_1").href = link1;
document.getElementById("link_2").href = 'http://stackoverflow.com/questions';

<a id="link_1">my first link</a>
<a id="link_2">random link</a>

【讨论】：

只是一个约定，您不应该回答重复的问题。这限制了范围。有些帖子多年来一直在进行，并且有不同的方式和讨论可以提供帮助。我知道您没有足够的代表来将问题标记为欺骗，但请添加一个习惯来搜索类似的问题并将其添加为评论。这将有更多帮助。 :-)
哦，我没有意识到这一点。我想要做的是最小化 html 文件中的编码，并有一个单独的文件，我可以在其中维护链接。那么，页面加载后，我可以修改href吗？这可以从另一个文件中完成，还是必须全部包含在同一个 html 中？
实际上，我确实尝试编辑我的问题以说明我进行了搜索（我找到了“展示你的作品”的页面）。我正在编辑它，但你伙计们回答得太快了……顺便说一句，这真是太棒了。
@Rajesh 你当然是对的。但是，我的想法并不是解释“如何动态添加属性”。相反，我试图解释为什么从 JS 到 HTML 的变量传递是不合逻辑的。
@Wayne 你可以随时操作 DOM。是的，您可以将此代码导出到 JS 文件。事实上，这是预期的方式。您可以使用window.addEventListener(Event, handler(){...}) 附加事件。您可以使用onload 或domcontentload。你会发现更多关于他们的信息here。

【解决方案2】：

你可以使用js动态创建锚标签

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);

请参阅this 问题以供参考。

【讨论】：

只是一个约定，您不应该回答重复的问题。这限制了范围。有些帖子多年来一直在进行，并且有不同的方式和讨论可以提供帮助。我知道您没有足够的代表来将问题标记为欺骗，但请添加一个习惯来搜索类似的问题并将其添加为评论。这将有更多帮助。 :-)
感谢您的建议