Innerhtml不断增加，而不是替换它- 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 you&;正如"你好，世界!"这不是很好。

更糟糕的是，如果"Hello you"是否已经显示，当我再次点击按钮时它会继续添加innerHTML所以即使"Hello world"是已经显示的，每次我点击按钮，它就会在下面添加它。

是否有一种方法来取代已经存在的文本或html代码?

我试着在网上查了一下，但我找不到解决办法。我是一个初学者，所以我希望你能帮我一个简单的方法来修复这个

Answer 1

Check This

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>