如何使用 javascript 将 ID 添加到 HTML href答案

【问题标题】：How add ID to HTML href with javascript如何使用 javascript 将 ID 添加到 HTML href
【发布时间】：2019-12-10 23:01:09
【问题描述】：

我有一个这样的 HTML

<div class="this">
   <a href="exp.com">EXP</a>
</div>

我想将 id 添加到 <a>。但不知道该怎么办。

【问题讨论】：

这能回答你的问题吗？ Javascript add ID to HTML href

标签： javascript

【解决方案1】：

首先使用.getElementsByClassName() 之类的内容选择您的元素。请记住，.getElementsByClassName() 返回一个 NodeList 元素集合，因此您需要访问第一个索引（或循环遍历它们）。然后，您可以简单地使用.id 设置 ID，因为 ID 只是元素的属性。

这可以在下面看到：

const element = document.getElementsByClassName('this')[0];
element.id = 'element';
console.log(element);

<div class="this">
   <a href="exp.com">EXP</a>
</div>

【讨论】：

在标签上添加 id 不在 div 标签中

【解决方案2】：

如果您想使用 Javascript 添加它，您需要使用选择器来定位您的 <a> 标记，然后在其上设置 id 属性。您可以使用querySelector() 函数或如下所示：

// Find an <a> tag that occurs below a class called "this" and set its id attribute
document.querySelector('.this > a').id = "some-id";

还有许多其他可用的函数可以通过本机 Javascript 和其他框架来处理此问题，因此您的里程可能会因您使用的内容而异。

示例

在这个例子中，我们提供了一些 CSS，它们应该只适用于 id 为“test”的元素，我们将运行必要的代码来显示 id 正在添加到元素中（因为它将是红色的）：

document.querySelector('.this &gt; a').id = 'test';

#test { color: red; }

<div class="this">
   <a href="exp.com">EXP</a>
</div>

【讨论】：

【解决方案3】：

将id 属性添加到<a> 标记。看中间线的区别：

<div class="this">
   <a id="expid" href="exp.com">EXP</a>
</div>

【讨论】：