我正在尝试创建一个可以多次添加和删除元素的 onclick 事件。我已经考虑使用setproperty和更改visibility（以及:after伪类），但它需要更改position破坏文档中很多内容的 。到目前为止，我只能想出添加元素一次然后删除一次的方法。有没有办法让这种情况发生不止一次（每次单击元素时）？
// Create New Element
let html = document.createElement('p');
html.className = 'skills';
html.id = 'html-skills';
html.setAttribute('title', 'HTML5 Proficiency');
html.appendChild(document.createTextNode('5%'));
html.style.setProperty('font-size', '16px')
// Grab Old Element
const oldHTML = document.getElementById('html');
// On Click function to add element
oldHTML.addEventListener('click', onClick);
function onClick(e) {
document.getElementById('htmlJS').appendChild(html)
}
// On click function to remove element
const htmlJS = document.getElementById('htmlJS')
html.addEventListener('click', removeHTML);
function removeHTML(e) {
let newHTML = document.getElementById("htmlJS");
let htmlNested = document.getElementById("htmlJS").lastChild;
htmlNested.lastChild.remove();
} <script
src="https://kit.fontawesome.com/d3d2bbf2ae.js"
crossorigin="anonymous"
></script>
<div class="skills-list__1 skills-icons" id="skills1">
<i class="fab fa-html5 html" id="html" title="HTML5"><div id="htmlJS"></div></i>
</div>您不能重用 onClick 函数（制作 '5%' html）的原因是您已经用 removeHTML 函数覆盖了该函数。我使用了一个事件函数来编写和删除内部 html 文本。有很多方法可以满足您的需求。希望你尝试自己的方式。
// Create New Element
let html = document.createElement('p');
html.className = 'skills';
html.id = 'html-skills';
html.setAttribute('title', 'HTML5 Proficiency');
html.appendChild(document.createTextNode(''));
html.style.setProperty('font-size', '16px')
document.getElementById('htmlJS').appendChild(html)
// Grab Old Element
const oldHTML = document.getElementById('html');
// On Click function to add element
oldHTML.addEventListener('click', onClick);
function onClick(e) {
if (html.innerHTML === '') {
html.innerHTML = '5%'
} else {
html.innerHTML = ''
}
}
// On click function to remove element
//Whatever you named this htmlJS id it still has onCLick function.
const htmlJS = document.getElementById('htmlJS')
html.addEventListener('click', removeHTML);
function removeHTML(e) {
let newHTML = document.getElementById("htmlJS");
let htmlNested = document.getElementById("htmlJS").lastChild;
} <script
src="https://kit.fontawesome.com/d3d2bbf2ae.js"
crossorigin="anonymous"
></script>
<div class="skills-list__1 skills-icons" id="skills1">
<i class="fab fa-html5 html" id="html" title="HTML5"><div id="htmlJS"></div></i>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句