为使用 insertAdjacentHTML 创建的 HTML 元素分配唯一 ID

Question

我正在尝试创建一个简单的页面，您可以在其中输入一些文本到输入字段中，然后您只需按下提交按钮即可从输入字段值创建 html 元素。

到目前为止我的代码是

    function remover(e) {
    let elementWrapper = document.getElementById(`list-item-wrapper`);
    if (event.target === document.querySelector('.list-input') && event.target.checked) {
        setTimeout(() => {
            elementWrapper.remove();
        }, 1000);
    } else {
        return;
    }
}

function handleClick() {
    let elementCount = 0;
    let inputNode = document.querySelector('.input-field');
    let uEl = document.querySelector('.unordered-list');
    uEl.insertAdjacentHTML(
        'afterbegin',
        `<div id="list-item-wrapper ${elementCount++}">
        <input type="checkbox" class="list-input" name=${inputNode.value}>
            <label for="list-input">
                ${inputNode.value}
            </label>
        </div>`
    );
}

我的问题是，当调用 handleClick function 时 elementCount 变量不会增加。

我尝试过使用 insertAdjacentHTML 以外的其他方法，但没有它我无法使其工作，因为我仍然需要一个唯一标识符。

Answer 1

把elementCount变量放到handleClick的外面function，否则不能从任何地方访问，调用handleClick时永远为0。 此外，您需要先将其递增，然后将 append 递增到插入字符串。

let elementCount = 0;

function handleClick() {
     elementCount++;
     let inputNode = document.querySelector('.input-field');
     let uEl = document.querySelector('.unordered-list');
     uEl.insertAdjacentHTML(
        'afterbegin',
        `<div id="list-item-wrapper ${elementCount}">
        <input type="checkbox" class="list-input" name=${inputNode.value}>
            <label for="list-input">
                ${inputNode.value}
            </label>
        </div>`
     );