如何用insertAdjacentHTML不循环显示单条数据？点击重复输出问题求助

问题核心是每次点击按钮都会触发insertAdjacentHTML执行，所以会重复插入内容。下面提供几种简单可行的解决方法：

方法1：点击后移除事件监听器 #

直接在点击回调里移除按钮的点击事件，让按钮只能被触发一次：

var btn = document.getElementById("btnClick");
function handleClick(e) {
    e.preventDefault();
    var string= "";
    string += '<p>FINISH</p>';
    document.querySelector(".test").insertAdjacentHTML("afterend", string);
    // 移除事件监听器，避免重复触发
    btn.removeEventListener("click", handleClick);
}
btn.addEventListener("click", handleClick);

方法2：添加前检查元素是否已存在 #

在插入内容前，先检查页面中是否已经存在目标元素，存在则跳过插入操作：

var btn = document.getElementById("btnClick");
btn.addEventListener("click", function (e) {
    e.preventDefault();
    // 给插入的元素加唯一类名，精准检查是否已存在
    if (document.querySelector(".finish-tag")) {
        return;
    }
    var string= "";
    string += '<p class="finish-tag">FINISH</p>';
    document.querySelector(".test").insertAdjacentHTML("afterend", string);
});

方法3：用标记变量记录状态 #

定义一个变量标记内容是否已插入，根据标记判断是否执行插入：

var btn = document.getElementById("btnClick");
var hasInserted = false; // 标记内容是否已插入
btn.addEventListener("click", function (e) {
    e.preventDefault();
    if (hasInserted) {
        return;
    }
    var string= "";
    string += '<p>FINISH</p>';
    document.querySelector(".test").insertAdjacentHTML("afterend", string);
    hasInserted = true; // 更新标记状态
});

内容的提问来源于stack exchange，提问作者wiihii