如何在JavaScript中动态创建元素？遇实现问题求助

初始尝试代码及问题 #

初始代码尝试遍历所有h2元素并插入内容，但执行后无任何显示：

<script>
  const subheadings = document.querySelectorAll("h2");
  subheadings.forEach(function(x) {
    document.getElementById("contents").innerHTML=x;
    <a href='#' id="contents"></a>
  });
</script>

错误原因： #

• JS脚本中直接嵌入<a>标签属于无效语法，不能在JS代码里直接写HTML标签。
• 循环中用innerHTML=x会每次覆盖容器内容，且x是DOM元素，直接赋值会被转为字符串；同时目标容器contents可能不存在或未正确定位。

更新后的代码及问题 #

调整后的代码仍无法显示h2文本：

<div class="col-3" id="contents-table">
  <script>
    const subheading = document.querySelectorAll('h2');
    subheading.forEach(function(x) {              
      let xbe = x.innerText.split(' ');
      for (let i = 0; i<xbe.length;i++) {
        const div = document.getElementById('contents-table');
        let a = document.createElement('a');
        a.innerText = xbe[i];
        console.log( a.innerText); 
        div.append(a);
      }
    });
  </script>
</div>

错误原因： #

• 脚本放在<div>内部，执行时页面可能还未加载完所有h2元素，导致querySelectorAll('h2')返回空集合。
• 不必要地将h2文本按空格分割为单个单词，每个单词创建一个a标签，不符合“每个副标题对应一个a标签”的需求。
• 循环内重复查询contents-table容器，虽不报错但效率低下。

正确解决方案 #

核心要点： #

1. 确保脚本在DOM完全加载后执行，避免找不到h2元素。
2. 每个h2对应一个完整的a标签，保留副标题的完整文本。
3. 提前获取目标容器，避免重复DOM查询。

示例代码： #

<!-- 目标容器放在页面合适位置 -->
<div class="col-3" id="contents-table"></div>

<script>
// 等待DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有h2元素
  const subheadings = document.querySelectorAll('h2');
  // 获取目标容器
  const contentsContainer = document.getElementById('contents-table');

  subheadings.forEach(function(heading, index) {
    // 创建a标签
    const link = document.createElement('a');
    // 设置a标签文本为h2的完整内容
    link.textContent = heading.textContent;
    // 设置跳转锚点（可选：给h2添加唯一id，实现点击跳转）
    const headingId = `section-${index + 1}`;
    heading.id = headingId;
    link.href = `#${headingId}`;
    // 添加样式或分隔符（可选）
    link.style.display = 'block';
    link.style.margin = '4px 0';
    // 将a标签添加到容器
    contentsContainer.appendChild(link);
  });
});
</script>

说明： #

• DOMContentLoaded事件确保页面所有元素加载完成后再执行脚本，避免querySelectorAll返回空。
• 给每个h2设置唯一id，让a标签可以直接跳转到对应的副标题位置，提升阅读体验。
• 给a标签添加基础样式，让目录结构更清晰。

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