结合Node.cloneNode实现点击按钮新增带递增ID的div及饼图更新

完全可以结合Node.cloneNode、模板字符串与for循环实现需求，该方案还能保证渲染性能和后续饼图逻辑的兼容性，具体实现步骤如下：

前置准备 #

• 给所有初始条目的父容器加统一标识，比如id设为stockListContainer，方便统计当前条目总数
• 可直接取初始第一条完整条目作为克隆模板，也可以提前在DOM里放一个隐藏的空白模板节点，避免克隆到用户修改过的内容
• 给每个条目里的Ativo、Quota%、Perda Potencial三个容器分别加统一类名，方便克隆后快速选中替换ID

核心实现逻辑 #

1. 新增按钮点击事件前置判断 #

先统计当前已有条目总数，达到15条上限时直接终止逻辑，避免超出限制：

const MAX_STOCK = 15;
const addBtn = document.querySelector('#addStockBtn');
const container = document.querySelector('#stockListContainer');

addBtn.addEventListener('click', () => {
  const currentCount = container.children.length;
  if (currentCount >= MAX_STOCK) {
    addBtn.disabled = true;
    return;
  }
  // 后续新增逻辑写在下方
})

2. 克隆节点+ID替换 #

克隆模板节点时使用深克隆cloneNode(true)保证子节点完整复制，再用模板字符串生成新的递增ID覆盖克隆带来的重复ID：

// 用第一条做克隆源，用隐藏模板的话直接选对应的模板节点即可
const template = container.children[0].cloneNode(true);
const newIdx = currentCount + 1;

// 按命名规则替换三个容器的ID，和原有ID规则完全对齐即可
template.querySelector('.ativo-item').id = `ativo${newIdx}`;
template.querySelector('.quota-item').id = `quota${newIdx}`;
template.querySelector('.perda-item').id = `perda${newIdx}`;

// 如果是可输入场景，清空克隆带来的原有输入值
template.querySelectorAll('input').forEach(input => input.value = '');

// 把新条目插入到容器末尾
container.appendChild(template);

3. 批量更新Quota%并同步饼图 #

用for循环遍历所有条目统一重算占比，同步更新DOM和饼图数据源即可：

const totalCount = container.children.length;
const newQuota = (100 / totalCount).toFixed(2);
const pieChartData = [];

// 遍历所有条目更新数据
for (let i = 1; i <= totalCount; i++) {
  // 更新DOM上的Quota显示
  document.querySelector(`#quota${i}`).textContent = `${newQuota}%`;
  // 组装Google饼图需要的数据源
  const stockName = document.querySelector(`#ativo${i}`).textContent || `Ativo ${i}`;
  pieChartData.push([stockName, Number(newQuota)]);
}

// 直接调用你原有逻辑里的Google饼图更新方法，传入新数据源即可
updateGooglePieChart(pieChartData);

注意事项 #

• 如果需要支持用户手动修改单条Quota后不被全局重写，可加自定义标记位判断，只有新增/删除条目时才触发全局Quota重算
• 所有ID命名规则和原有逻辑完全对齐的前提下，原有饼图取数逻辑不需要做任何修改即可正常运行

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