内部html 不断累加而不是替换它 - javascript - html

Question

我有一个非常复杂的代码需要解释，而且我的母语不是英语，所以我试图用一个简单的例子来解释我的问题。

我有这个功能（我们称之为功能检查）。我向一个按钮添加了一个事件监听器（我们称它为 button1）。单击按钮时，将执行该功能。

Function check () {
   if (document.getElementById("id1").hasAttribute("clicked")) {
      document.getElementById("id2").innerHTML = '<p>Hello World!</p>;
   } else {
      document.getElementById("id2").innerText = "Hello you";
   }
}

button1.addEventListener("click", check);

问题来了：当它没有属性时，它会显示“你好”。这很棒。再次点击，它仍然只显示一次，再次很棒。但是，如果稍后它确实具有该属性并且再次单击该按钮，那么它会将“Hello you”显示为“Hello world！”这不是很好。

更糟糕的是，如果“Hello you”已显示或未显示，就会发生这种情况，当我再次单击该按钮时，它会继续添加 innerHTML，因此即使已显示“Hello world”，它也会添加每次我点击按钮时它都在下面。

有没有办法替换已经存在的文本或 html 代码？

我试过在互联网上查找，但找不到解决方案。我是初学者，所以我希望你能用简单的方法帮助我解决这个问题

Answer 1

检查这个

function check () {

   if (document.getElementById("id1").hasAttribute("clicked")) {
      document.getElementById("id2").innerHTML = '<p>Hello World!</p>';
   } else {
      document.getElementById("id2").innerText = "Hello you";
   }
}


document.getElementById("button1").addEventListener("click", check);
document.getElementById("button2").addEventListener("click", changeAttr);

function changeAttr(){
document.getElementById("id1").setAttribute('clicked',true)
}

<div id="id1"></div>
<div id="id2"></div>
<button id="button1">Click</button>
<br/>
<br/>
<button id="button2">Add Attribute </button>

内部html 不断累加而不是替换它 - javascript - html

Innerhtml keeps adding up instead of replacing it - javascript - html

html

javascript

function

innerhtml

innertext