如何替换完整的 html，包括标签和其他内容？答案

【问题标题】：How can i replace complete html including tags and other stuf?如何替换完整的 html，包括标签和其他内容？
【发布时间】：2022-01-06 10:24:29
【问题描述】：

我想更改或替换完整的 html 标签，而不仅仅是在它内部：

 function addToLikes(image_id) {
        $.ajax({
            url: 'functions/addToLikes.php',
            method: 'POST',
            data: {
                image_id: image_id
            },
            success: function(data) {
                document.getElementById(image_id).innerHTML = `<i class="bi bi-heart-fill ms-3" onclick="removeFromLikes('<?php echo $row['image_id'] ?>')" style="cursor:pointer"></i>`;
            }
        });
    }

HTML

 <i class="bi bi-heart ms-3" id="<?php echo $row['image_id'] ?>" onclick="addToLikes('<?php echo $row['image_id'] ?>')" style="cursor:pointer"></i>

【问题讨论】：

outerHTML怎么样
@james 谢谢伙计，成功了:)
或者最好使用element.parentNode.replaceChild(new, old)。但是你必须先用 JavaScript 创建新的孩子。

标签： javascript php ajax

【解决方案1】：

这是一种更好的方法——速度更快，并且不会使 DOM 闪烁

$(".bi").on("click",  function(e) {
  const $this = $(this)
  const liked = $this.hasClass("bi-heart-fill");
  $.post("functions/toggleLikes.php', { id: $this.data("id"), liked:liked },function() {
    liked = !liked;
    $this.toggleClass("bi-heart-fill",liked)
    $this.toggleClass("bi-heart",!liked)
  })
})

  <i class="bi bi-heart<?= $liked?"fill":"" ?> ms-3" data-id="<?php echo $row['image_id'] ?>" style="cursor:pointer"></i>
</div>

【讨论】：