Javascript Onclick事件以添加和删除元素

我正在尝试创建一个onclick事件，它可以多次添加和删除元素。我考虑过使用

setproperty

并更改

可见性

（以及

:after

伪类），但它需要更改

位置，这会破坏文档中的许多内容。到目前为止，我只能想出一种方法，添加元素一次，然后删除它一次。是否有一种方法可以使这种情况多次发生（每次单击元素时）


//创建新元素
让html=document.createElement（'p'）；
html.className='skills'；
html.id=‘html技能’；
setAttribute（'title'，'HTML5熟练程度'）；
appendChild（document.createTextNode（'5%'）；
html.style.setProperty（'font-size'，'16px'）
//抓住旧元素
constOldHTML=document.getElementById（'html'）；
//单击函数以添加元素
addEventListener（'click'，onClick）；
函数onClick（e）{
document.getElementById（'htmlJS'）.appendChild（html）
}
//单击函数以删除元素
const htmlJS=document.getElementById（'htmlJS'）
addEventListener（'单击'，删除html）；
函数removeHTML（e）{
让newHTML=document.getElementById（“htmlJS”）；
让htmlNested=document.getElementById（“htmlJS”）.lastChild；
htmlNested.lastChild.remove（）；
}
无法重用onClick函数（生成“5%”html）的原因是您已使用removeHTML函数覆盖了该函数。我使用一个事件函数来编写和删除内部html文本。有很多方法可以满足你的需求。希望你尝试你自己的方式


//创建新元素
让html=document.createElement（'p'）；
html.className='skills'；
html.id=‘html技能’；
setAttribute（'title'，'HTML5熟练程度'）；
appendChild（document.createTextNode（“”））；
html.style.setProperty（'font-size'，'16px'）
document.getElementById（'htmlJS'）.appendChild（html）
//抓住旧元素
constOldHTML=document.getElementById（'html'）；
//单击函数以添加元素
addEventListener（'click'，onClick）；
函数onClick（e）{
如果（html.innerHTML==''）{
html.innerHTML='5%'
}否则{
html.innerHTML=“”
}
}
//单击函数以删除元素
//无论您将此htmlJS id命名为什么，它仍然具有onCLick函数。
const htmlJS=document.getElementById（'htmlJS'）
addEventListener（'单击'，删除html）；
函数removeHTML（e）{
让newHTML=document.getElementById（“htmlJS”）；
让htmlNested=document.getElementById（“htmlJS”）.lastChild；
}

这个问题不是很清楚，请您发布一段代码片段，我们可以在编辑器中使用执行和查看。对不起，我不知道这是可用的。基本上，html中有一个图标元素，单击后加载段落元素。单击段落元素时，它会将其删除。我想弄清楚怎么做很多次。现在它只是永久消失，不再运行。还有一件事，你想在点击时隐藏并显示这个元素（5%）吗？因为您正在使用htmlNested.lastChild.remove（）；这就从DOM本身中删除了这个元素。我现在正在为这个答案自责。我最初考虑使用这样的if语句，但因为我尝试用CSS和display属性添加空引号，认为它会级联和重写（style.setpropery display:hidden-->display:“”），所以我忽略了这一点，因为我认为这与任何语言都无关。