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

Question

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

计算出条形码的数量后，我使用 Javascript 函数将其显示到 UI insertAdjacentHTML，并使用所需的 HTML 创建一个 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 ....