通过javascript向锚标签添加参数

Question

我想通过JavaScript向锚标记添加参数。我不想为此使用jQuery。这是我的html锚标记

<div class="u-right u-half"><a href="http://example.com/register/" class="u-button u-alt">Register</a></div>

我能够使用jquery做到这一点，但我想使用JavaScript做到这一点。这是我的jQuery，但我想改用JavaScript

jQuery('.u-right .u-button').attr("href", function(i, href) {
return href + '?page=search';
});

如何使用JavaScript做到这一点？

Answer 1

document.getElementById("placeholder").href += '?page=search';

<div class="u-right u-half" id="placeholder">
  <a href="http://example.com/register/" class="u-button u-alt">Register</a>
</div>

Answer 2

要在与某些CSS选择器匹配的所有锚点/元素中做到这一点：

[...document.querySelectorAll('.u-right .u-button')]
  .forEach(node => node.href += '?page=search')

Old School js：

Array.prototype.slice.call(document.querySelectorAll(…))
  .forEach(function (node) { … });

Answer 3

使用getElementsByClassName()和setAttribute()，您可以在下面进行操作

var anchor = document.getElementsByClassName('u-button')[0];
anchor.setAttribute('href', anchor + '?page=search')

console.log(anchor);

<div class="u-right u-half"><a href="http://example.com/register/" class="u-button u-alt">Register</a></div>