使用 jQuery 向元素添加 id [重复]答案

【问题标题】：Add id to element with jQuery [duplicate]使用 jQuery 向元素添加 id [重复]
【发布时间】：2019-03-10 01:10:29
【问题描述】：

我有一个 HTML button，我想在元素中添加一个 id。但是我无法手动完成，所以我正在寻找通过 jQuery 的选项。

<div class="mejs-button mejs-playpause-button mejs-play">
  <button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button> 
</div>

【问题讨论】：

但是页面加载后加上id有什么用呢？对我来说，这似乎是一个 XY 问题。
这是 100% 没有意义的。如果您可以选择元素以在其上放置id，那么您不需要在其上放置id，因为您已经选择了它...
“我有一个 HTML 按钮，我想给元素添加一个 id。” 为什么？对我来说听起来像X/Y problem...
虽然这很可能是一个 XY 问题，但在有种情况下，您可能希望在创建元素后添加 id。例如，如果您从 HTML 文本创建元素，但 id 信息来自不安全的来源。在这种情况下，您确实希望使用 DOM 操作添加 id（可能就在创建元素之后，但在将其添加到 DOM 之前）。您会这样做，因为在创建之前在 HTML 文本中更改它会是一个安全漏洞。
例如：let id='from-insecure-source';let newDiv = $('<div class="mejs-button mejs-playpause-button mejs-play"><button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button></div>'); newDiv.find('button').attr('id', id); 是安全的，而 let newDiv = $('<div class="mejs-button mejs-playpause-button mejs-play"><button ' + id + 'type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button></div>'); 不是。如果有人试图让代码运行，前者可能会以无效的 ID 结束，但代码不会运行。

标签： html jquery element add

【解决方案1】：

您可以使用 jQuery 使用 prop() 或 attr() 方法：

jQuery(document).ready(function($) {
    $('.mejs-button.mejs-playpause-button.mejs-play button').prop('id', 'my-id');
    //Or 
    $('.mejs-button.mejs-playpause-button.mejs-play button').attr('id', 'my-id');
});

$('.mejs-button button').prop('id', 'my-id');

console.log( $('.mejs-button button').prop('id') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mejs-button mejs-playpause-button mejs-play"><button type="button" 
aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button> 
</div>

【讨论】：

我不确定 prop 在这里是否有效。你检查了吗？
请务必检查我的工作 sn-p
如果.mejs-button 有多个按钮，那么这将失败
这在技术上并没有错，但对于 OP 试图解决的任何问题，这绝对不是正确的方法。
@T.J.Crowder 谢谢！ :)