使用innerHTML动态替换HTML未达预期效果的技术求助

问题描述 #

实现了_renderWorkoutUpdated函数，接收更新值对象来替换特定运动记录，但更新后的第一条记录出现容器嵌套问题，样式与其他记录不一致。

问题根源 #

你当前的代码是给已存在的<li class="workout">元素设置innerHTML，但拼接的HTML字符串开头又包含完整的<li>标签、结尾包含</li>标签，最终DOM结构变成了嵌套的<li>：

<li class="workout">
  <li class="workout workout--type" data-id="xxx">
    <!-- 内容 -->
  </li>
</li>

嵌套结构破坏了原有布局规则，导致样式异常。

修复方案 #

移除HTML字符串开头的<li>标签和结尾的</li>标签，只保留<li>内部的内容即可：

修复后的代码 #

_renderWorkoutUpdated(currentWorkout) {
    let html = `
    <div class="container">
        <div class="workout__title">
        ${currentWorkout.description}
        </div>
      <div class="dropdown">
        <div class="kebab-menu">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>        
        </div>
        <div class="dropdown-content" id="dropdownContent-${currentWorkout.id}">
        <div class="option">Edit</div>
        <div class="option">Delete</div>
        <div class="option">Delete All</div>
        </div>
      </div>
    </div>       
    
    <div class="workout__details">
      <span class="workout__icon">${
        currentWorkout.type === 'running' ? '🏃🏻' : '🚴🏻'
      }</span>
      <span class="workout__value">${currentWorkout.distance}</span>
      <span class="workout__unit">km</span>
    </div>
    <div class="workout__details">
      <span class="workout__icon">⏱</span>
      <span class="workout__value">${currentWorkout.duration}</span>
      <span class="workout__unit">min</span>
    </div>`;

    if (currentWorkout.type === 'running')
      html += `
    <div class="workout__details">
      <span class="workout__icon">⚡️</span>
      <span class="workout__value">${currentWorkout.pace.toFixed(1)}</span>
      <span class="workout__unit">min/km</span>
    </div>
    <div class="workout__details">
      <span class="workout__icon">🦶🏼</span>
      <span class="workout__value">${currentWorkout.cadence}</span>
      <span class="workout__unit">spm</span>
    </div>`;

    if (currentWorkout.type === 'cycling')
      html += `
    <div class="workout__details">
    <span class="workout__icon">⚡️</span>
    <span class="workout__value">${currentWorkout.speed.toFixed(1)}</span>
    <span class="workout__unit">km/h</span>
  </div>
  <div class="workout__details">
    <span class="workout__icon">⛰</span>
    <span class="workout__value">${currentWorkout.elevationGain}</span>
    <span class="workout__unit">m</span>
  </div>`;

    document.querySelector(
      `.workout[data-id="${currentWorkout.id}"]`
    ).innerHTML = html;
  }

额外优化提示 #

• 原代码中id="dropdownContent"会在多个运动记录中重复，已改为id="dropdownContent-${currentWorkout.id}"生成唯一ID，避免JS或样式冲突。

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