如何选择动态生成标记中的特定元素并使用getElementById操作？

方法1：传入动态ID配合getElementById使用 #

你提到的将动态生成的ID作为参数传入的方案完全可行，getElementById本身支持传入任意字符串类型的变量作为参数，不需要提前知晓具体的ID值。

1. 首先在Jinja循环生成DOM时，为每个div生成唯一ID，同时将该ID直接作为参数绑定到对应按钮的点击事件上：

<ul>
{% for item in 你的循环数据集 %}
  <li>
    <div id="target-div-{{ loop.index }}" class="content-block">
      <!-- div内部内容 -->
      <p>{{ item.text }}</p>
      <button onclick="updateDiv('target-div-{{ loop.index }}')">修改当前块</button>
    </div>
  </li>
{% endfor %}
</ul>

2. 编写对应的JS函数，接收ID参数后直接传给getElementById即可定位到目标元素：

function updateDiv(targetId) {
  const targetDiv = document.getElementById(targetId);
  // 执行你的修改逻辑，示例为修改背景色
  targetDiv.style.backgroundColor = '#e8f4f8';
}

方法2：无需ID，通过DOM节点关系直接定位（更推荐） #

如果没有其他场景需要用到ID来索引div，你可以省去生成ID的步骤，直接通过按钮的节点关系定位所属div，避免ID重复的潜在问题：

1. Jinja模板不需要设置div的ID，点击事件直接传入按钮元素本身即可：

<ul>
{% for item in 你的循环数据集 %}
  <li>
    <div class="content-block">
      <p>{{ item.text }}</p>
      <button onclick="updateDiv(this)">修改当前块</button>
    </div>
  </li>
{% endfor %}
</ul>

2. JS函数中通过closest方法向上查找匹配选择器的父元素，直接定位目标div：

function updateDiv(buttonElem) {
  const targetDiv = buttonElem.closest('.content-block');
  // 执行你的修改逻辑
  targetDiv.style.backgroundColor = '#e8f4f8';
}

内容的提问来源于stack exchange，提问作者Jason Li