如何使用更改 addEventListener 替换内容而不是添加

问题描述

嗨,我有一些代码,每次对下拉项进行更改时,我都会在页面上插入一个跨度。我想要实现的是每次更改下拉列表时要更改/替换跨度内的内容。但是我目前得到的是每次都创建一个新的跨度。下面是我的代码外观示例,如有任何帮助,我们将不胜感激。

doSomething.addEventListener('change',function() {
    document.querySelector('.className').insertAdjacentHTML("afterend","<span>" + somethingDynamic + "</span>");
});

解决方法

我需要将跨度内容插入到页面上的某个位置,所以我创建了一个新的 Div 以插入到我需要它的页面上,然后按照建议使用 innerHTML 替换其中的内容以获得我想要的内容需要。

doSomething.addEventListener('change',function() {
    document.querySelector('.className').insertAdjacentHTML("afterend","<div class='new'></div>");
  document.querySelector('.new').innerHTML =  "<span>"+ dynamicContent + "</span>";
});