如何使用javascript将链接插入HTML而不受document.getElementById的限制

首先，让我解释一下我正在努力实现的目标。我目前有8个小网站，除了标题图片和href链接外，其他都是相同的

我正在寻找一种方法，以尽量减少维护和潜在的人为错误，每次这些网页需要更新

例如，假设我有两个指向特定于州的登录页面的链接

<a href="https://www.mypage.com/studentLogin?stateId=WA">Student Login</a>
<a href="https://www.mypage.com/teacherLogin?stateId=WA">Teacher Login</a>

然后在HTML中使用它

<a href="#" onclick="getLink();" id="studentLogin">CLICK ME</a>

这是有效的，直到我发现HTML中不能有多个元素具有相同的id。例如，其中一个页面有一个指向菜单中学生登录名的链接，还有一个指向HTML主要内容中相同位置的链接，并且只有一个可以工作

所以我想我可以在外部javascript文件中创建几个函数，每个函数都有自己的ID，然后更新HTML以调用新的ID，但我正在寻找更好的方法

我真正关心的是尽量减少维护，因为我目前有8个这样的登录页，但我们可以在不久的将来有更多。由于这些页面中只有4个不同的链接，如果我能找出如何将整个链接存储在一个变量中，并在

<a> tag

标签

---

谢谢您的帮助。

您可以将类添加到相关链接，然后使用

文档获取元素。getElementsByClassName（“myclass”）

<a href="#" class="myclass">test1</a><a href="#" class="myclass">test2</a>

---

这将使链接成为一个包含所有链接的数组，您可以通过这些链接进行迭代以应用修改。

听起来像是一项渐进式增强的工作

我建议您在html链接中添加一个属性；数据状态更改。然后，您编写的任何未来链接都只需添加属性

//keep the base url in the tag
<a href="https://www.mypage.com/studentLogin" data-has-state>Click Me<a>

//now using jquery attach to all links that have that data- element.
$('body').on('click', '[data-has-state]', function(e){
   // eat the click
   e.preventDefault();

   //get the url
   var url = $(this).attr('href') + '?stateId=' + getParam();

   window.location = url;
);

---

感谢您的输入，我喜欢这个想法，因为我只需要更改

getParam（）

函数中的一个条目。然而，我需要一些额外的帮助，因为我无法让它工作。我的站点已经在使用jQuery，我找到的模板使用的是版本1.7.1。我不确定是否必须以某种方式将此功能添加到基本jQuery文件中。因为我不知道怎么做，我只是把你给我的代码放在HTML页面的末尾，在结束标记之前。我是否只是将文本

data has state

放在标记中，而不带任何参数？如果只是将其嵌入页面中，则需要将调用包装在其中，以便在页面完成后加载。您不需要在data has状态中输入任何值。使用数据属性这样做很常见，但这不是必需的$（函数（）{//put code here}我仍然无法使用此功能。根据您的反馈，我创建了一个JSFIDLE页面，其中包含一个简单的链接，以及您给我的JS。该链接应使用href标记

中使用的无效urlhttp://www.goo

并将

gle.com

附加到它的末尾，使它成为

www.google.com

的有效链接，但它没有不工作。你能看到我缺少了什么吗？我的错，我没有在函数中添加e。我在上面修复了它。这与我想要的完全一样。非常感谢。我还有一个问题，但可能需要一篇新文章。似乎jQuery加载项干扰了你给我的代码。链接在页面的主要部分工作正常，但我在菜单中，这是一个无序列表的集合，由一个名为

Dropotron

的东西组织成一个菜单，代码似乎根本没有运行，并且

？stateId=MI

没有被应用。我认为Dropoton某种程度上阻止了我在菜单中寻找的行为

var links = document.getElementsByClassName("myclass")

//keep the base url in the tag
<a href="https://www.mypage.com/studentLogin" data-has-state>Click Me<a>

//now using jquery attach to all links that have that data- element.
$('body').on('click', '[data-has-state]', function(e){
   // eat the click
   e.preventDefault();

   //get the url
   var url = $(this).attr('href') + '?stateId=' + getParam();

   window.location = url;
);

 $('body').on('click', '.someCssClass', function(e){
       // eat the click
       e.preventDefault();

       //get the url
       var url = $(this).attr('href') + '?stateId=' + getParam();

       window.location = url;
    );