使用JS创建HTML元素并替换内容遇到问题（document.createElement）

问题根源 #

你当前的代码每次调用update都会新建一个<p>元素显示排名，但没有清理之前的旧元素，再加上x变量的错误逻辑，导致要么重复添加元素，要么刚创建的排名文本就被删除。

解决方案：复用排名元素（推荐） #

不要每次点击都创建新元素，而是初始化时就创建好排名元素，之后只更新它的文本内容。这种方式既高效，又不会出现DOM元素堆积的问题。

修改后的JS代码：

var Text = document.getElementById("text");
var B1 = document.getElementById("AddPs");
var B2 = document.getElementById("RemovePs");
var div1 = document.getElementById("ContainsPs"); // 用ID获取更可靠，避免索引失效问题

var counter = 0;
// 初始化时创建排名元素并添加到容器
var rankingElement = document.createElement("p");
div1.appendChild(rankingElement);

function AddOne() {
  if (counter < 10) {
    counter++
    update();
  } else {
    Text.innerText = TextStored.Limit;
  }
}

function RemoveOne() {
  if (counter > 0) {
    counter--
    update();
  } else {
    Text.innerText = TextStored.Limit;
  }
}

function update() {
  // 更新数字文本
  Text.innerText = counter;
  // 直接更新排名元素的内容，无需重复创建
  rankingElement.innerText = TextStored.Text[counter];
}

var TextStored = {
  Text: ["0", "1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"],
  Limit: "You reached the limit"
};

B1.onclick = AddOne;
B2.onclick = RemoveOne;

改动说明 #

1. 将div1的获取方式从getElementsByTagName("div")[2]改为getElementById("ContainsPs")，避免DOM结构变化时索引失效的问题。
2. 初始化阶段就创建好排名的<p>元素并添加到容器，后续仅更新其文本内容。
3. 删除了原代码中创建新元素和错误的删除逻辑，简化为直接更新内容的逻辑。

备选方案：每次更新前清理旧元素 #

如果坚持要每次创建新元素，可在添加新元素前先移除容器内的旧排名元素：

var Text = document.getElementById("text");
var B1 = document.getElementById("AddPs");
var B2 = document.getElementById("RemovePs");
var div1 = document.getElementById("ContainsPs");

var counter = 0;

function AddOne() {
  if (counter < 10) {
    counter++
    update();
  } else {
    Text.innerText = TextStored.Limit;
  }
}

function RemoveOne() {
  if (counter > 0) {
    counter--
    update();
  } else {
    Text.innerText = TextStored.Limit;
  }
}

function update() {
  Text.innerText = counter;
  
  // 移除旧的排名元素（匹配容器内除数字p外的第一个p）
  var oldRanking = div1.querySelector("p:not(#text)");
  if (oldRanking) {
    div1.removeChild(oldRanking);
  }
  
  // 创建并添加新的排名元素
  var ranking = document.createElement("p");
  ranking.innerText = TextStored.Text[counter];
  div1.appendChild(ranking);
}

var TextStored = {
  Text: ["0", "1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"],
  Limit: "You reached the limit"
};

B1.onclick = AddOne;
B2.onclick = RemoveOne;

原代码问题解析 #

原代码中x变量的逻辑完全错误：第一次点击时x为false，创建并添加元素后x被设为true；第二次点击时，先创建新元素添加，随后因x为true，刚创建的元素被立即删除，导致看不到排名文本。同时每次点击都创建新元素却不删除旧元素，最终会堆积大量无用的<p>元素。

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