如何替换 AdjacentHTML 而不是创建另一个 AdjacentHTML 实例

Question

我正在开发一个非常简单的应用程序来跟踪使用的数字或条形码。

计算出条形码的数量后，我使用 Javascript insertAdjacentHTML 函数将其显示给 UI，创建具有所需 [=18] 的 div =]，虽然我似乎无法找到一种方法来说明如何每次替换 DIV，而不是创建另一个实例和另一个实例。

我认为这可能是范围问题，但我找不到解决方案。

const myForm = document.getElementById("form_barCodeAdmin");

myForm.addEventListener("submit", (e) => {
    let startRange, endRange, quantity;

    e.preventDefault(); // Prevents web page from reloading.

    startRange = document.getElementById("start__range").value;
    endRange = document.getElementById("end__range").value;



    if(endRange > startRange){

        quantity = endRange - startRange;

        let html = `<div class="alert alert-warning" id="quantity__range">Quantity Barcodes: %quantity% </div>`;

        replacedHTML = html.replace('%quantity%', quantity);
        document.getElementById("range__Results").insertAdjacentHTML('beforeend', replacedHTML);


        // if html is not empty then delete Node and run Insert html function. Else run Function. 

    } else {
        console.log("Please enter a smaller starting range than the end range");
    };

});

Answer 1

如果要替换 #range__Results 的所有内容，只需使用 .innerHTML = replacedHTML 而不是插入它。

如果有更多内容，而您只想替换之前添加的 #qunantity_range，您可以检查它是否存在并在插入新内容之前删除它

let currentQuantityRange = document.getElementById('quantity_range')
if (currentQuantityRange) currentQuantityRange.remove()

或者，您可以检查 div 是否存在并替换它的内容而不是添加它

let currentQuantityRange = document.getElementById('quantity_range')
if (currentQuantityRange)
  currentQuantityRange.innerHtml = `Quantity Barcodes: ${quantity}`
else {
  let html ....

如何替换 AdjacentHTML 而不是创建另一个 AdjacentHTML 实例

How to replace AdjacentHTML instead of creating another Instance of AdjacentHTML

html

javascript

dom

event-listener

queryselector