如何清除元素innerHTML？JS改名功能逻辑异常求助

你的代码里，清除旧内容的逻辑判断条件写错了：你把DOM元素对象element和空字符串""做比较，这是错误的。

document.getElementById("demo")返回的是一个DOM元素对象，哪怕这个元素的内容是空的，它本身也是一个对象。当你用对象和字符串比较时，JS会把对象转为字符串"[object HTMLParagraphElement]"，所以element != ""这个条件永远为true，理论上每次点击按钮都会执行清除操作。但你觉得跳过了清除逻辑直接alert，大概率是因为alert弹窗会立刻弹出，你没注意到内容已经被清除；或者如果你的JS代码在DOM加载前运行，element会是null，执行element.innerHTML = ""时会报错，代码终止，不过这种情况alert也不会执行，显然你的情况不属于后者。

修正方案 #

如果你希望每次点击按钮都先清除旧内容（不管旧内容是否存在），可以直接去掉判断条件，直接执行清除：

function changeName() {
  var element = document.getElementById("demo");
  // 直接清除旧内容，无需判断
  element.innerHTML = "";
  var name = document.getElementById("name").value;
  var nameChange = " ";
  if (name.length < 2) {
    alert("You need a longer name!");
  } else {
    nameChange =
      name.charAt(name.length - 1) +
      name.slice(1, name.length - 1) +
      name.charAt(0);
    element.innerHTML = "Your new name is " + nameChange;
  }
}

如果你只想在旧内容不为空时才清除，那应该判断元素的innerHTML（或textContent）是否为空：

function changeName() {
  var element = document.getElementById("demo");
  // 判断元素内容是否非空，trim()用来忽略空格
  if (element.innerHTML.trim() !== "") {
    element.innerHTML = "";
  }
  var name = document.getElementById("name").value;
  var nameChange = " ";
  if (name.length < 2) {
    alert("You need a longer name!");
  } else {
    nameChange =
      name.charAt(name.length - 1) +
      name.slice(1, name.length - 1) +
      name.charAt(0);
    element.innerHTML = "Your new name is " + nameChange;
  }
}

这样修改后，点击按钮时旧内容会被正确清除，再执行后续的名称判断逻辑。

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